不用jQuery实现的动画效果代码

不过随着新版本的升级, 体积也慢慢变大了.
24KB, Minified and Gzipped 155KB, Uncompressed Code
压缩并gzip输出24K, 也不小了.
如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.
看下面这个图片渐变效果, 其实纯js不到20行就可以搞定了.

body {padding:0; margin:0;}
#main {margin: 50px auto;border: 1px solid #ccc;width:700px}
#main img {padding:0 20px; border:none; display:none}

(function() {
var imgs = document.getElementById('main').getElementsByTagName('img'),
len = imgs.length,
i = 0;
(function() {
var deep = 0,
j = i++,
timer = setInterval(function() {
imgs[j].style.opacity = deep;
imgs[j].style.filter = "alpha(opacity=" + deep * 100 + ")";
imgs[j].style.display = 'inline';
deep += 0.1;
deep >= 1 && clearInterval(timer);
}, 60);
if (i >= len) return;
setTimeout(arguments.callee, 1000);
})();
})();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jQuery实现动画效果的实例代码

    复制代码 代码如下: <style type="text/css">       table{border:1px solid #666;}       table td{border:1px solid #eee;width:200px;height:200px;}       img{width:200px;height:200px;border:none;position:relative;}    </style> <script src=&quo

  • jQuery学习笔记之jQuery动画效果

    基本动画代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Hello World jQuery!</title><script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type=&quo

  • jQuery中实现动画效果的基本操作介绍

    动画效果 show():显示 hide()隐藏 $().toggle():显示和隐藏效果切换 都可以传入参数,speed. fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度 滑动显示 slideDown(): slideUp(): slideToggle(): 都可以传入一个speed参数. $(':animated');获取正在执行动画的元素. 将正在执行动画的元素停止: $(':animat

  • Jquery实现简单的动画效果代码

    复制代码 代码如下: <!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> <title></title

  • 基于Jquery的温度计动画效果

    基于Jquery的温度计动画效果

    设计图如下:1.xhml 复制代码 代码如下: <div id="mometer"> <div id="hot"></div> <span> <div id="Hgheader">0℃</div> <div id="Hg"></div> </span> </div> <input name="

  • 基于jquery的动画效果代码

    基于jquery的动画效果代码

    jquery动画 有意思的地方见效果图: 思想: 将图片设置分割div的背景图片,控制div的属性,可以现实有趣的滤镜效果,本例中展示了一种,感兴趣的朋友可以尝试其他滤镜的实现. 本例其余动画部分,主要是利用jquery中提供animate和delay实现. animate:这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性. delay:设置一个延时来推迟执行队列中之后的项目. 实例效果: jquery 动画 *{margin: 0px;paddi

  • 不用jQuery实现的动画效果代码

    不用jQuery实现的动画效果代码

    不过随着新版本的升级, 体积也慢慢变大了.24KB, Minified and Gzipped 155KB, Uncompressed Code压缩并gzip输出24K, 也不小了.如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.看下面这个图片渐变效果, 其实纯js不到20行就可以搞定了. body {padding:0; margin:0;} #main {margin: 50px auto;border: 1px solid #ccc;width:700px} #main i

  • jQuery UI实现动画效果代码分享

    jQuery UI实现动画效果代码分享

    页面文档载入后,为第一张图片添加class属性值为img1,为第二张图片添加class属性值img2,为第三张图片添加class属性img3,为第四张图片添加class属性值img4,这会使得每张图片的下半部分被上一张更大的图片给覆盖住. 当鼠标单击暴露在最上面的图片时,该图片在0.6秒内从原本大小放大150%,并逐渐减小不透明度直到完全消失,与此同时,其他所有图片在0.6秒内动态的放大并占据相应上一张图片的位置.全部动态效果结束后,消失不见的那张图片重新显示在最下面. <!DOCTYPE ht

  • jQuery实现带动画效果的多级下拉菜单代码

    jQuery实现带动画效果的多级下拉菜单代码

    本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-dow

  • jQuery实现带有动画效果的回到顶部和底部代码

    jQuery实现带有动画效果的回到顶部和底部代码

    本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

  • jQuery 动画效果代码分享

    一．显示.隐藏 jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显示内容和隐藏内容. $('.show').click(function(){ //设置个触发事件 $('#box').show(); //显示 }); $('.hide').click(function(){ //设置个触发事件 $('#box').hide(); //隐藏 }); 在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)

  • jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

    jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

    这是一款基于jQuery的百叶窗焦点图动画,和之前介绍的CSS3百叶窗焦点图动画不同的是,它的兼容性更好,实用性更强,因为它是基于纯jQuery的,基本上所有浏览器都能够支持.焦点图的图片切换动画是百叶窗的动画方式,但也有几种不同的百叶窗动画,因此也不会觉得单调. 在线演示     源码下载 HTML代码 <div id="slider"> <img src="images/1.jpg" alt="我们1" title=&quo

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • jQuery实现连续动画效果实例分析

    jQuery实现连续动画效果实例分析

    本文实例讲述了jQuery实现连续动画效果的方法.分享给大家供大家参考.具体如下: 这里介绍jQuery实现一连串的连续动画效果,将这些动画运用先设置好,然后在jQuery的作用下完成一个接一个的动画,这在网页游戏编写中是个基础但重要的动画生成技巧,对于前台设计来说也是有必要掌握的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-lx-animate-style-demo/ 具体代码如下: <!DOCTYPE html PUBLI

  • js实现类似jquery里animate动画效果的方法

    本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

  • jQuery实现带动画效果的二级下拉导航方法

    本文实例讲述了jQuery实现带动画效果的二级下拉导航方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/x

随机推荐