JS之链式运动,及任意值运动框架,包括透明度的改变

  链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数,

 1 function move(obj,attr,target,fn){
 2     clearInterval(obj.timer);
 3     obj.timer = setInterval(function(){
 4     var iCur=0;
 5     if (attr == ‘opacity‘) {
 6         iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
 7     }else{
 8         iCur = parseInt(getStyle(obj,attr));
 9     }
10     var speed = (target-iCur)/8
11     speed = speed>0?Math.ceil(speed):Math.floor(speed);
12         if (iCur == target) {
13             clearInterval(obj.timer);
14             fn&&fn();//注意位置,要放在这里
15         }
16        else {
17             if (attr ==‘opacity‘) {
18                 obj.style.opacity=(iCur+speed)/100;
19             }else{
20                 obj.style[attr]=iCur+speed+‘px‘;
21                }
22     }
23
24     },30);
25 }                
时间: 2025-01-02 15:40:43

JS之链式运动,及任意值运动框架,包括透明度的改变的相关文章

js之任意值运动框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js多物体任意值运动

假如有两个div,一个div要变宽,一个div要变高,你怎么写呢? 哎呀,写2个方法啊,一个控制div1变宽,一个控制div2变高啊 那么你的代码,是不是下面这样的呢! 示例:Div变宽和变高 现象:div1在onmouseover时变宽,onmouseout时恢复原大小; div2在onmouseover时变高,onmouseout时恢复原大小 缺点:重复的代码写了好几个方法 html部分 <div id="div1"></div> <div id=&q

(42)JS运动之多物体框架--多个div变宽

如果只为div添加一个定时器的话,在多个div变宽的时候会发生问题,但是如果为每个div添加一个定时器,那么就可以实现多个物体变宽.注意:在多物体运动的情况下,所有东西不能共用.offsetXXX会跟border冲突导致不能得到想要的结果,在这里可以用getStyle()函数代替. function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComp

Vue.js响应式原理

本文和大家分享的主要是Vue.js 响应式原理相关内容,一起来看看吧,希望对大家 学习Vue.js有所帮助. 关于Vue.js Vue.js 是一款 MVVM 框架,上手快速简单易用,通过响应式在修改数据的时候更新视图. Vue.js 的响应式原理依赖于 Object.defineProperty  ,尤大大在Vue.js 文档中就已经提到过,这也是 Vue.js 不支持 E8 以及更低版本浏览器的原因. Vue 通过设定对象属性的  setter/getter  方法来监听数据的变化,通过 g

u3d 逐个点运动,路径运动。 U3d one by one, path motion.

u3d 逐个点运动,路径运动. U3d one by one, path motion. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:[email protected] E-mail: 313134555 @qq.com 逐个点运动,路径运动. I'm going to do some motion and path. 如果是动态增加,就不要用数组,用list.这种.动态增加.点击一个点,加入列表. If it's a dynamic increase, don't u

文件上传以及JS链式结构

文件上传: 文件上传使用FileUpload控件,使用控件的SaveAs方法,需要绝对路径. 获取文件的绝对路径:Server.MapPath(相对路径); 或许要上传文件的本身名字用.FileName获取. 因为名字相同的文件将会被直接覆盖,所以一般文件名字要拼接上传时间和用户名保证不重名. 上传文件默认最大为4MB,在C#端限制文件大小有缺陷,一般用JS端限制. 获取要上传的文件通过ID获取FileUpload控件然后通过value值获取文件然后通过.length属性确定是否有文件要上传,然

推荐12个创建响应式布局的优秀网格框架

在这篇文章中,我们为大家推荐12个创建响应式布局的优秀网格框架.如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务.enjoy! 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的 JavaScript 框架 十款精心挑选的在线 CSS3 代码生成工具 开发者必备的八个最佳云端集成开发环境 2012年度最佳 Web 前端开发工具和框架 Pure Pur

Dense.js - 响应式的视网膜(Rtina)图像支持

Dense 是一款 jQuery 插件,它提供一个简单的方法为设备提供精密像素比的图像,为你的网站带来视网膜支持,清除模糊,图像更清晰.通过简单地包括 jQuery 插件的页面上,就能实现响应式的视网膜(Rtina)图像支持. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件 精心挑选的美轮美奂的 jQuery 图片特效插

JS地毯式学习三

1. 插件是一类特殊的程序 . 他可以扩展浏览器的功能 , 通过下载安装完成 . 比如 , 在线音乐.视频动画等等插件. // 检测非 IE 浏览器插件是否存在function hasPlugin(name) {var name = name.toLowerCase();for (var i = 0; i < navigator.plugins.length; i ++) {if (navigator.plugins[i].name.toLowerCase().indexOf(name) >