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改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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 Array交叉表实现代码
2010/08/05 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
js实现密码强度检验
2017/01/15 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
孝敬父母的活动方案
2014/08/28 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Python数据类型最全知识总结
2021/05/31 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python