suchen

Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung von Beispielen für Javascript-Bewegungseffekte (Heranzoomen, Hineinschieben, Scrollen)_Javascript-Kenntnisse

Zusammenfassung von Beispielen für Javascript-Bewegungseffekte (Heranzoomen, Hineinschieben, Scrollen)_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:20:551329Durchsuche

Das Beispiel in diesem Artikel fasst die Implementierung und Verwendung von Javascript-Bewegungseffekten zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Bildvergrößerungseffekt: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片放大缩小</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#ulList{ margin:50px;}
#ulList li{ margin:10px; width:100px; height:100px; float:left; background:#ddd; border:1px solid black;}
</style>
<script>
window.onload = function()
{
 var oUl = document.getElementById('ulList');
 var aLi = oUl.getElementsByTagName('li');
 var zIndex = 2;
 //布局转换
 for(var i=0;i<aLi.length;i++){
  aLi[i].style.left = aLi[i].offsetLeft + 'px';
  aLi[i].style.top = aLi[i].offsetTop + 'px';
 }
 for(var i=0;i<aLi.length;i++){
  aLi[i].style.position = 'absolute';
  aLi[i].style.margin = '0';
 }
 for(var i=0;i<aLi.length;i++){
  aLi[i].onmouseover = function()
  {
   this.style.zIndex = zIndex++;
   startMove(this, {width:200, height:200, marginLeft:-50, marginTop:-50});
  };
  aLi[i].onmouseout = function()
  {
   startMove(this, {width:100, height:100, marginLeft:0, marginTop:0});
  };
 }
};
function getStyle(obj, attr)
{
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }else{
  return getComputedStyle(obj, false)[attr];
 }
}
function startMove(obj, json, fn)
{
 clearInterval(obj.timer);
 obj.timer=setInterval(function (){
  var bStop=true;
  for(var attr in json)
  {
   var iCur=0;
   if(attr=='opacity')
   {
    iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
   }
   else
   {
    iCur=parseInt(getStyle(obj, attr));
   }
   var iSpeed=(json[attr]-iCur)/8;
   iSpeed=iSpeed>0&#63;Math.ceil(iSpeed):Math.floor(iSpeed);
   if(iCur!=json[attr])
   {
    bStop=false;
   }
   if(attr=='opacity')
   {
    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
    obj.style.opacity=(iCur+iSpeed)/100;
   }
   else
   {
    obj.style[attr]=iCur+iSpeed+'px';
   }
  }
  if(bStop)
  {
   clearInterval(obj.timer);
   if(fn)
   {
    fn();
   }
  }
 }, 30)
}
</script>
</head>
<body>
<ul id="ulList">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
</body>
</html>

2. Anzeigeeffekt beim Verschieben und Verblassen von Informationen: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#msgBox{ width:500px; margin:0 auto; padding:5px;}
.msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}
.box{ float:left;}
</style>
<script>
window.onload = function()
{
 var oTxt = document.getElementById('txt1');
 var oBtn = document.getElementById('btn1');
 var oBox = document.getElementById('msgBox');
 oBtn.onclick = function()
 {
  var oMsg = document.createElement('div');
  var aDiv = oBox.getElementsByTagName('div');
  oMsg.className = 'msgList';
  oMsg.innerHTML = oTxt.value;
  oTxt.value = '';
  if(aDiv.length==0){
   oBox.appendChild(oMsg);
  }else{
   oBox.insertBefore(oMsg, aDiv[0]);
  }
  var iH = oMsg.offsetHeight;
  oMsg.style.height = 0;
  startMove(oMsg, {height:iH}, function(){
   startMove(oMsg, {opacity:100});
  });
 };
};
function getStyle(obj, attr)
{
 if(obj.currentStyle){
  return obj.currentStyle;
 }else{
  return getComputedStyle(obj, false)[attr];
 }
}
function startMove(obj, json, fn)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var bStop = true;
  for(var attr in json){
   var iCur = 0;
   if(attr == 'opacity'){
    iCur = Math.round((parseFloat(getStyle(obj, attr))*100));
   }else{
    iCur = parseInt(getStyle(obj, attr));
   }
   var iSpeed = (json[attr] - iCur) / 8;
   iSpeed = iSpeed > 0 &#63; Math.ceil(iSpeed) : Math.floor(iSpeed);
   if(iCur != json[attr]){
    bStop = false;
   }
   if(attr == 'opacity'){
    obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed)+')';
    obj.style.opacity = (iCur + iSpeed) / 100;
   }else{
    obj.style[attr] = iCur + iSpeed + 'px';
   }
  }
  if(bStop){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }
 }, 30);
}
</script>
</head>
<body>
<div class="box">
 <textarea id="txt1" cols="40" rows="10"></textarea><br />
 <input id="btn1" type="button" value="提交信息" />
</div>
<div id="msgBox">
</div>
</body>
</html>

3. Nahtloser Scrolleffekt: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}
#div1 li{ float:left; padding:10px;}
#div1 li img{ display:block;}
#div1 ul{ position:absolute;}
</style>
<script>
window.onload = function()
{
 var oDiv = document.getElementById('div1');
 var oUl = oDiv.getElementsByTagName('ul')[0];
 var aLi = oUl.getElementsByTagName('li');
 var aBtn = document.getElementsByTagName('input');
 var iSpeed = -3;
 var timer = null;
 oUl.innerHTML += oUl.innerHTML;
 oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
 timer = setInterval(move, 30);
 aBtn[0].onclick = function()
 {
  iSpeed = -3;
 };
 aBtn[1].onclick = function()
 {
  iSpeed = 3;
 };
 oDiv.onmouseover = function()
 {
  clearInterval(timer);
 };
 oDiv.onmouseout = function()
 {
  timer = setInterval(move, 30);
 };
 function move(){
  if(oUl.offsetLeft<-oUl.offsetWidth/2){
   oUl.style.left = '0px';
  }else if(oUl.offsetLeft>0){
   oUl.style.left = -oUl.offsetWidth/2 + 'px';
  }
  oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
 }
};
</script>
</head>
<body>
<input type="button" value="向左" />
<input type="button" value="向右" />
<div id="div1">
 <ul>
  <li><img src="images/1.jpg" width="100" height="100" /></li>
  <li><img src="images/2.jpg" width="100" height="100" /></li>
  <li><img src="images/3.jpg" width="100" height="100" /></li>
  <li><img src="images/4.jpg" width="100" height="100" /></li>
 </ul>
</div>
</body>
</html>

Weitere Inhalte zu JavaScript-Bewegungseffekten finden Sie im Sonderthema auf dieser Website: „Zusammenfassung der JavaScript-Bewegungseffekte und -Techniken“

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript-Implementierungsmethode für die Schaltfläche „Zurück zum Anfang“_Javascript-KenntnisseNächster Artikel：Javascript-Implementierungsmethode für die Schaltfläche „Zurück zum Anfang“_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen