管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　不过随着新版本的升级, 体积也慢慢变大了.

　　24KB, Minified and Gzipped 155KB, Uncompressed Code

　　压缩并gzip输出24K, 也不小了.

　　如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.

　　看下面这个图片渐变效果, 其实纯js不到20行就可以搞定了.

　　

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><style type="text/css"></P>
<P>body {padding:0; margin:0;}
#main {margin: 50px auto;border: 1px solid #ccc;width:700px}
#main img {padding:0 20px; border:none; display:none}</style>
<div id="main"><img alt="" width="215" height="78" src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" /> <img alt="" width="215" height="78" src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" /> <img alt="" width="215" height="78" src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" /> <img alt="" width="215" height="78" src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" /> <img alt="" width="215" height="78" src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" /> <img alt="" width="215" height="78" src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" /> <img alt="" width="215" height="78" src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" /> <img alt="" width="215" height="78" src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" /></div>
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0D%0A(function()%20%7B%0D%0A%20var%20imgs%20%3D%20document.getElementById('main').getElementsByTagName('img')%2C%0D%0A%20len%20%3D%20imgs.length%2C%0D%0A%20i%20%3D%200%3B%0D%0A%20(function()%20%7B%20%20%0D%0A%20%20var%20deep%20%3D%200%2C%0D%0A%20%20%20j%20%3D%20i%2B%2B%2C%0D%0A%20%20%20timer%20%3D%20setInterval(function()%20%7B%20%20%20%20%0D%0A%20%20%20%20imgs%5Bj%5D.style.opacity%20%3D%20deep%3B%0D%0A%20%20%20%20imgs%5Bj%5D.style.filter%20%3D%20%22alpha(opacity%3D%22%20%2B%20deep%20*%20100%20%2B%20%22)%22%3B%0D%0A%20%20%20%20imgs%5Bj%5D.style.display%20%3D%20'inline'%3B%0D%0A%20%20%20%20deep%20%2B%3D%200.1%3B%0D%0A%20%20%20%20deep%20%3E%3D%201%20%26%26%20clearInterval(timer)%3B%0D%0A%20%20%7D%2C%2060)%3B%0D%0A%20%20if%20(i%20%3E%3D%20len)%20return%3B%0D%0A%20%20setTimeout(arguments.callee%2C%201000)%3B%0D%0A%20%7D)()%3B%0D%0A%7D)()%3B%0D%0A%3C%2Fscript%3E">

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

教程首页更多教程