每个复杂的运动效果都是由简单的效果组成的,我们可以为简单的效果制定一个框架,也就是写一个通用函数,这样可以对元素的任何属性进行变换,复杂的效果就可以很容易实现。
注意事项:
当变换元素的透明度时,需要做特殊处理如果变换元素宽度时,对于有border的元素,如果我们使用obj.offsetWidth来取得元素宽度时,会出现错误,因为offsetWidth包括边框。如果边框是1px,定时函...
分类:
编程语言 时间:
2014-11-25 18:42:40
阅读次数:
195
/** * 使用offsetLeft,需注意margin的使用 * offsetLeft = margin-left + left; * offsetWidth= padding + border + width; * * @author Lonve */function getStyle(ele....
分类:
Web程序 时间:
2014-11-24 17:09:33
阅读次数:
192
运动框架:
先要清除定时器,防止多次点击或者移入移出时,开启多个定时器,元素的运动会是所有定时器中运动的总和当达到目的时,要清除定时器(使用if/else 实现)
N...
分类:
编程语言 时间:
2014-11-21 18:57:52
阅读次数:
273
在学习js的过程中,发现这家伙做特效真是不错,虽然说目前水平还不够,不过也能写点简单的效果。今天分享一个简单的运动框架,然后利用这个框架实现简单的链式运动特效。
1.move.js
在运动框架中,主要进行长宽变化和透明度的变化。长宽的变化可以实现DIV的体积运动变化效果,透明度的话主要是在鼠标移入移出事件中添加淡入淡出的效果。我将这个简单的运动框架封装到一个单独的js文件中,方便调用。
先看...
分类:
编程语言 时间:
2014-11-04 21:12:45
阅读次数:
303
缓冲运动框架实例,设计json for 小数取整 ......................................
分类:
其他好文 时间:
2014-10-21 19:46:51
阅读次数:
255
JavaScript中的运动运动的基础原理简单运动的函数封装摩擦运动缓冲运动运动框架加入缓冲模式运动框架的应用多图展开收缩实例带运动效果的留言本淘宝幻灯片带运动的返回顶部图片预加载图片预加载原理图片预加载的应用实例图片的按需加载弹性运动加速运动减速运动弹性运动弹性运动带加速度弹性运动带摩擦弹性运动与...
分类:
编程语言 时间:
2014-10-21 13:35:09
阅读次数:
300
首先,我们需要知道在js中获取对象的宽度如offsetWidth等,可能会存在一些小小的bug。原因之一在于offsetWidth仅仅只是获取盒子模型中内容的部分宽度,并不包含内边距,边框和外边距,这样会导致控制对象运动与预期不符,这里就不详细的去解释。
而为了解决这个问题,在这里,我们提供了一个方法来保证我们的运动的准确性。
style只能获取元素的内联样式,内部样式和外部样式使用s...
分类:
Web程序 时间:
2014-07-26 02:52:26
阅读次数:
213
#div1 {width:100px;height:100px;background:red;filter:alpha(opacity:30);opacity:0.3}
window.onload=function ()
{
var oDiv=document.getElementById('div1');//先获取div元素
oDiv.onmouseover=function (...
分类:
Web程序 时间:
2014-07-26 02:13:07
阅读次数:
279
该运动框架可以用于改变宽度、高度、字体大小、透明度、Left、top等值先上一个获取真正样式的函数//定义getStyle函数,获取真正样式function
getStyle(obj,attr){ if(obj.currentStyle){//兼容IE return obj.cu...
分类:
其他好文 时间:
2014-05-12 20:17:59
阅读次数:
357