javascript实现的点击元素实现当前轮换展现效果

javascript实现的点击元素实现当前轮换展现效果:
本章节分享一段代码实例，它实现了点击元素实现当前展现效果，并且具有比较人性化的变换效果。
并且详细介绍一下它的实现过程，需要的朋友可以做一下参考。
代码如下:

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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 index=0; index<s_pic_li.length; index++){ s_pic_li[index].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>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function(){}，当文档内容完全加载完毕再去后自行函数中的代码。
（2）.var s_pic = document.getElementById("s_pic")，获取ul元素对象。
（3）.var s_pic_li = s_pic.getElementsByTagName("li")，获取ul下面的所有li元素对象集合。
（4）.var now = s_pic_li[0]，获取集合中的第一个li元素，默认状态先第一个li元素展现。
（5）.for(var index=0; index<s_pic_li.length; index++)，遍历集合中的每一个元素。
（6）.s_pic_li[index].onclick = function(){}，为li元素注册click事件处理函数。
（7）.if(this == now) return false，如果是点击的当前展现的元素,那么直接跳出函数。
（8）.var w = now.offsetWidth，获取当前展现元素的宽度。
（9）.var h = now.offsetHeight，获取当前展现元素的高度。
（10）.var l = now.offsetLeft，获取当前展现元素距离左侧的尺寸。
（11）.var t = now.offsetTop，获取当前展现元素距离上侧的尺寸。
（12）.var w1= this.offsetWidth，获取当前点击元素的宽度。
（13）.var h1 = this.offsetHeight，获取当前点击元素的高度。
（14）.var l1 = this.offsetLeft，获取当前点击元素距离左侧的尺寸。
（15）.var t1 = this.offsetTop，获取当前点击元素距离上侧的尺寸。
（16）.startrun(now,{width:w1,height:h1,left:l1,top:t1}，将当前展现元素的尺寸和位置设置为当前点击元素的尺寸和位置。
（17）.startrun(this,{width:w,height:h,left:l,top:t})，将当前点击元素的尺寸和位置设置为当前展现元素的尺寸和位置。
（18）.now=this，将当前点击的元素的引用赋值给now。
（19）.function getstyle(obj,name){}，获取指定元素指定样式属性的值，obj是元素对象，name样式属性名称。
（20）.if(obj.currentStyle){
  return obj.currentStyle[name];
}，如果支持currentStyle,则使用currentStyle对象获取。
（21）.else{
  return getComputedStyle(obj,false)[name];
}，使用getComputedStyle()方法获取属性值。
（22）.function startrun(obj,json,fn){}，此方法实现了相关数据的设置功能，第一个参数为元素对象，第二个参数是一个对象直接量，用来存储一些数据，第三个参数为回调函数。
（23）.clearInterval(obj.timer)，停止上一个定时器函数的执行，否则可能造成多个定时器函数同事执行的情况。
（21）.obj.timer = setInterval(function(){},30），每隔30毫秒执行一次回调函数。
（22）.var isall = true，声明一个变量并赋初值为true，用来作为是否已经完整展现替换效果。
（23）.for(var attr in json)，遍历json对象中的每一个属性。
（24）.var cur=0，声明一个变量并赋初值0，用来存储当前元素的指定样式值。（25）.if(attr == "opacity"){
   cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}，如果是透明度属性，那么就获取元素的当前透明度并且乘以100，转换为0-100之间的数值。
（26）.else{
  cur = parseInt(getstyle(obj,attr));
}，如果不是透明度属性的话，直接获取值。
（27）.var speed = (json[attr] - cur)/8，json[attr] - cur获取的是目标值和当前值得差，然后再除以8.
（28）.speed = speed>0?Math.ceil(speed):Math.floor(speed)，一个数学问题了，这里不用介绍。
（29）.if(cur != json[attr]){
  isall = false;
}，判断当前值是否达到目标值，如果没有达到，那么就将isall的变量值修改为false。
（30）.if(attr == "opacity"){
  obj.style.filter = "alpha(opacity="+(cur+speed)+")";
  obj.style.opacity = (cur+speed)/100;
}，低版本IE浏览器和标准浏览器两种动态设置透明度的方式。
（31）.else{
  obj.style[attr] = cur+speed+"px";
}，其他属性不需要其他处理。
（32）.if(isall){
  clearInterval(obj.timer);
  if(fn){
    fn();
  }
}，如果完成展现替换效果，那么就停止定时器函数的执行。
如果传递第三个参数，那么将执行此回调函数。
二.相关阅读:
（1）.getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。
（2）.offsetWidth属性可以参阅js的offsetWidth属性用法详解一章节。
（3）.offsetLeft属性可以参阅js的offsetTop好offsetLeft属性用法详解一章节。
（4）.获取样式值可以参阅getComputedStyle()和currentStyle属性的用法一章节。
（5）.setInterval()方法可以参阅setInterval()函数用法详解一章节。
（6）.Math.round()方法可参阅Math.round()函数用法详解一章节。
（7）.parseFloat()方法可以参阅javascript的parseFloat()方法一章节。
（8）.Math.ceil()方法可以参阅javascript的Math.ceil()方法一章节。
（9）.Math.floor()方法可以参阅javascript的Math.floor()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=17540

更多内容可以参阅:http://www.softwhy.com/javascript/

转载于:https://www.cnblogs.com/webph/p/5097221.html

javascript nonono相关推荐

  1. JavaScript：创建对象（原型模式和构造函数模式）

    JavaScript:对象 一.理解对象 var person = {}Object.defineProperty(person,'name',{writable:false,value : 'Nik ...

  2. JavaScript高级程序设计第三版 第3章 基本概念

    第3章 基本概念 3.1 语法 3.1.1 区分大小写 3.1.2 标识符 3.1.3 注释 3.1.4 严格模式 3.1.5 语句 3.2 关键字和保留字 3.3 变量 3.4 数据类型 3.4.1 ...

  3. 【AJAX】JavaScript的面向对象

    Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...

  4. 【JavaScript总结】JavaScript语法基础：JS高级语法

    作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...

  5. 【JavaScript总结】JavaScript语法基础：DOM

    ->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...

  6. 【JavaScript总结】JavaScript语法基础：JS编码

    运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...

  7. 【JavaScript总结】JavaScript语法基础：数据类型

    ------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...

  8. 【JavaScript总结】JavaScript发展与学习内容

    发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...

  9. Python：模拟登录、点击和执行 JavaScript 语句案例

    案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...

  10. [JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)

    课程来源:后盾人 上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟 数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...

最新文章

  1. 设计模式之Protocol实现代理模式
  2. python教程：super()的用法
  3. Java中的三目运算符可能出现的问题
  4. TCP/IP协议族-----10、搬家IP
  5. 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 11丨产品销售分析 II【难度简单】
  6. 如何导出共享文件夹的权限或转移
  7. java类修饰词和内部类详解
  8. 10 个实用技巧，让 Finder 带你飞
  9. Solidity safesub防止溢出
  10. 2 追踪光线=》2.6 反射光线
  11. 人工智能革命（上）：通往超级智能之路
  12. 张朝阳建议年轻人不要努力过头，要现实点，网友：不拼搞不好就被裁了
  13. Sql学习04（11.23-11.24）
  14. 吴式太极大师战波简介
  15. 外文版计算机科学期刊,计算机期刊大全（国外英文资料）.doc
  16. securecrt 8.1 7.3 注册机 使用步骤【转】
  17. html表格优秀作品,40多个漂亮的网页表单设计实例
  18. C:\Windows\System32\drivers\etc中的文件说明
  19. Chrome浏览器ERR_INVALID_SIGNED_EXCHANGE解决方案
  20. How to Pronounce PROBABLY

热门文章

  1. @Aspect 注解使用详解
  2. 粒子滤波 python,粒子滤波器基本原理.ppt.ppt
  3. Excel——输入身份证号后三位显示为0的问题
  4. 2021-02-26
  5. ovm安装过程及中断处理
  6. Java实现腾讯企业邮箱收发邮件
  7. 程序员这样优化简历，一投制胜
  8. 2022年上半年5月网络工程师试题及答案
  9. C++ primer 个人学习总结
  10. iOS 贝塞尔曲线初探