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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
vue解决跨域问题(推荐)
Nov 10 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
学习使用PHP数组
2006/10/09 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
JavaScript游戏之优化篇
2010/11/08 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Python新手如何理解循环加载模块
2020/05/29 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
PHP开发工程师面试问题集锦
2012/11/01 面试题
自荐信格式范文
2013/10/07 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
网络管理员岗位职责
2014/03/17 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
答辩状格式范本
2015/05/22 职场文书
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers