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 浏览器对象模型BOM使用介绍
Apr 13 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
Jquery中map函数的用法
Jun 03 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 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带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
js读取本地文件的实例
2017/12/22 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
Python性能优化技巧
2015/03/09 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python实现把类当做字典来访问
2019/12/16 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
宿舍使用违章电器检讨书
2014/01/12 职场文书
农贸市场管理制度
2014/01/31 职场文书
工程主管竞聘书
2015/09/15 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs