js实现交换运动效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js实现交换运动效果的方法。分享给大家供大家参考。具体分析如下:

实现后的效果,点击互相交换位置和距离左边和上角的信息。

要点一:

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?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程序设计有所帮助。

Javascript 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
js实现星星打分效果
Jul 05 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 #Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
js简单实现点击左右运动的方法
Apr 10 #Javascript
js实现透明度渐变效果的方法
Apr 10 #Javascript
js实现同一页面多个运动效果的方法
Apr 10 #Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 #Javascript
js实现缓冲运动效果的方法
Apr 10 #Javascript
You might like
全国中波电台频率表
2020/03/11 无线电
第十二节 类的自动加载 [12]
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
php创建类并调用的实例方法
2019/09/25 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
iis6+javascript Add an Extension File
2007/06/13 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
利用python获得时间的实例说明
2013/03/25 Python
python多线程编程中的join函数使用心得
2014/09/02 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python数据类型详解(二)列表
2016/05/08 Python
django admin组件使用方法详解
2019/07/19 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
机关门卫制度
2014/02/01 职场文书
打架检讨书2000字
2014/02/22 职场文书
《故乡》教学反思
2014/04/10 职场文书
农村党员一句话承诺
2014/05/30 职场文书
地球上的星星观后感
2015/06/02 职场文书