链式运动JavaScript实现

html代码

<div></div>
<div></div>
<div></div>
<div>你这一辈子有没有为别人拼过命</div>

css代码

  div {width: 100px;height: 100px;background: red;margin-bottom: 50px;opacity: 0.3;}

JS代码

function getStyle(obj, attr) {if (obj.currentStyle) {return obj.currentStyle[attr];} else {return getComputedStyle(obj, false)[attr];}}function move(obj, iTarget, attr, fn) {//1、关闭定时器clearInterval(obj.timer);//开启定时器obj.timer = setInterval(function () {//判断用户是否获取的透明度var iCur;if (attr == "opacity") {//parseInt:防止在IE出现闪烁问题iCur = parseInt(parseFloat(getStyle(obj, attr) * 100));} else {//将字符串转换为数字iCur = parseInt(getStyle(obj, attr));}//算速度var speed = (iTarget - iCur) / 8;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//判断if (iCur == iTarget) {clearInterval(obj.timer);fn && fn()} else {if (attr == "opacity") {obj.style.opacity = (iCur + speed) / 100;obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")";} else {obj.style[attr] = iCur + speed + 'px';}}}, 30)}var aDiv = document.querySelectorAll("div");aDiv[0].onmouseover = function () {move(this, 300, "width", function () {move(aDiv[0], 300, "height")});};aDiv[1].onmouseover = function () {move(this, 300, "height");};aDiv[2].onmouseover = function () {move(this, 100, "opacity");};aDiv[3].onmouseover = function () {move(this, 60, "fontSize");}

链式运动JavaScript实现相关推荐

Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
B站JavaScript从入门到精通Blue石川老师视频部分代码_运动升级_链式运动_土豆网
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
多元素运动框架-链式运动的封装
1.0运动原理: 逆战班学生整理让某件物品沿着某种方向随着时间的变化改变位置 setInterval(function(){ obox.style.left = obox.offsetLeft+10 ...
（43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个参数function,这个function表示下一个要执行的动作,具体代码如下: <!DOCTYPE HTML> < ...
javascript链式语法
因为 jQuery 库的缘故,链式语法在前端界变得非常流行.实际上这是一种非常容易实现的模式.基本上,你只需要让每个函数返回 'this',这样其他函数就可以立即被调用.看看下面的例子. var bi ...
JavaScript——jQuery AJAX链式编程(流式编程)DEMO
基本概念链式编程:设计模式之一 DEMO doSubmit: function(){ return $.ajax({url: url,type: 'post',data: $("#fm&q ...
javascript --- 对象的方式体验链式调用
将功能相近的方法写入同一个对象中,是一个很好的编程习惯,便于后期的维护和前期的开发. foo1 var fooObj = {foo1: function() {console.log('foo1'); ...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...

链式运动JavaScript实现

链式运动JavaScript实现相关推荐

最新文章

热门文章