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 相关文章推荐
js+css在交互上的应用
Jul 18 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
react+antd 递归实现树状目录操作
Nov 02 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
详解python3中tkinter知识点
2018/06/21 Python
Python单元测试简单示例
2018/07/03 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python logging 日志的级别调整方式
2020/02/21 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
药剂专业求职信
2014/06/20 职场文书
防火标语大全
2014/10/06 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL