当前位置：首页 → 问答吧 → 很好的效果，但不知如何改成自己想要的

很好的效果，但不知如何改成自己想要的

时间：2010-05-10

来源：互联网

这是坛内的一个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> <title> code.js.cn </title> <base href="http://www.3site.eu/examples/liquid/" /> <style> html,body{margin:0;background:#000;} #ldh_win{position:relative;width:332px;height:200px; margin:0 auto;overflow:hidden; } #up{ background:url(vaio.png) no-repeat 100% 0; position:absolute;right:0;height:200px;} img{position:absolute;right:0;border:none} </style> </head> <body> <div id="ldh_win"> <img src="vaio.png" width="3320" height="200" id="fb" onload="fx(0)"> <div id="up"></div> </div> </body> <script> function fx(i){ var up=document.getElementById("up").style,fb=document.getElementById("fb").style; setInterval(function(){i+=5;up.width=i+'px';fb.right=-i*9+'px';},15); } </script> </html>
提示：您可以先修改部分代码再运行

怎样改，使其从左到右显示啊

作者: lishaojun95272 发布时间: 2010-05-10

<!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> code.js.cn </title> <base href="http://www.3site.eu/examples/liquid/" /> <style> html,body{margin:0;background:#000;} #ldh_win{position:relative;width:332px;height:200px; margin:0 auto;overflow:hidden; } #up{ background:url(vaio.png) no-repeat 0 0; position:absolute;left:0;height:200px;} img{position:absolute;right:0;border:none} </style> </head> <body> <div id="ldh_win"> <img src="vaio.png" width="3320" height="200" id="fb" onload="fx(0)"> <div id="up"></div> </div> </body> <script> function fx(i){ var up=document.getElementById("up").style,fb=document.getElementById("fb").style; setInterval(function(){i+=5;up.width=i+'px';fb.left=-i*9+'px';},15); } </script> </html>
提示：您可以先修改部分代码再运行

作者: cloudgamer 发布时间: 2010-05-10

OK!!!3q

作者: lishaojun95272 发布时间: 2010-05-10

效果很不错，研究下原理，原来是改变图片大小实现的，但创意惊人

[ 本帖最后由 hero777 于 2010-5-11 03:50 编辑 ]

作者: hero777 发布时间: 2010-05-11

学习！学习！

作者: 007sf 发布时间: 2010-05-11

呵呵比flash 还酷

作者: cielkong 发布时间: 2010-05-11

把fb.right=-i*9+'px'中的-i改成i效果就变了，谁能告诉我下为什么呢

作者: lishaojun95272 发布时间: 2010-05-11

-i跟i当然不一样.....
得出来的值都不一样啊,楼主
这种效果还是FLASH做的好