교환 모션 effect_javascript 기술을 달성하는 js 방법-JS 튜토리얼-php.cn

교환 모션 effect_javascript 기술을 달성하는 js 방법

WBOY

풀어 주다： 2016-05-16 16:05:00

원래의

1094명이 탐색했습니다.

이 글의 예시에서는 js에서 교환 모션 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

효과를 얻으려면 클릭하여 왼쪽과 위쪽 모서리의 위치와 거리 정보를 교환하세요.

포인트 1:

var now = s_pic_li[0];
for(var i=0; i<s_pic_li.length; i++){
s_pic_li[i].onclick = function(){
if(this == now) return false;
var w = now.offsetWidth;
var h = now.offsetHeight;
var l = now.offsetLeft;
var t = now.offsetTop;
var w1= this.offsetWidth;
var h1 = this.offsetHeight;
var l1 = this.offsetLeft;
var t1 = this.offsetTop;
startrun(now,{width:w1,height:h1,left:l1,top:t1});
startrun(this,{width:w,height:h,left:l,top:t});
now=this;
}
}

로그인 후 복사

루프를 통해 각 블록에 클릭 이벤트를 추가하고 양측으로부터 정보를 얻은 후 해당 정보를 매개변수로 하여 모션 기능을 실행합니다.

마지막으로 다음 코드를 추가하세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body,ul,li{margin:0; padding:0;
font:18px/1.5 arial; color:#333;}
#big_pic{width:500px; height:400px;
background:#ccc; text-align:center;
position:absolute;}
#s_pic li{float:left; width:100px;
height:80px; display:inline;
background:#06c; text-align:center;
position:absolute; top:310px;}
-->
</style>
<script>
<!--
window.onload = function(){
 var s_pic = document.getElementById("s_pic");
 var s_pic_li = s_pic.getElementsByTagName("li");
 var now = s_pic_li[0];
 for(var i=0; i<s_pic_li.length; i++){
  s_pic_li[i].onclick = function(){
   if(this == now) return false;
   var w = now.offsetWidth;
   var h = now.offsetHeight;
   var l = now.offsetLeft;
   var t = now.offsetTop;
   var w1= this.offsetWidth;
   var h1 = this.offsetHeight;
   var l1 = this.offsetLeft;
   var t1 = this.offsetTop;
   startrun(now,{width:w1,height:h1,left:l1,top:t1});
   startrun(this,{width:w,height:h,left:l,top:t});
   now=this;
  }
 }
}
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
function startrun(obj,json,fn){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var isall = true; 
  for(var attr in json){
   var cur=0;
   if(attr == "opacity"){
    cur = Math.round(parseFloat(getstyle(obj,attr))*100);
   }else{
    cur = parseInt(getstyle(obj,attr));
   }
   var speed = (json[attr] - cur)/8
   speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
   if(cur != json[attr]){
    isall = false;
   }
   if(attr == "opacity"){
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style.opacity = (cur+speed)/100;
   }else{
    obj.style[attr] = cur+speed+"px";
   }
  }
  if(isall){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }
 },30);
}
//-->
</script>
</head>
<body>
<ul id="s_pic">
 <li style="left:0; top:0; width:400px; height:300px">0</div>
 <li style="left:0;">1</li>
 <li style="left:110px;">2</li>
 <li style="left:220px;">3</li>
 <li style="left:330px;">4</li>
</ul>
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.