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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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查看session内容的函数
2008/08/27 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
基于Python的接口测试框架实例
2016/11/04 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
音乐教育感言
2014/03/05 职场文书
生日主持词
2014/03/20 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
主题班会演讲稿
2014/05/22 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
幽默导游词开场白
2015/05/29 职场文书
教师培训学习心得体会
2016/01/21 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python