JS新闻滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> code.js.cn </title> <style> a{display:block;font-size:15px;line-height:18px;text-decoration:none;color:#333;font-family:Arial;font-size:12px;} .shell{ background:url(http://bbs.blueidea.com/images/common/xml.gif) no-repeat 4px 5px; border:1px solid #aaa; width:400px; padding:3px 2px 2px 20px; } #div1{ height:18px; overflow:hidden; } </style> </head> <body> <div class="shell"> <div id="div1"> <a href="javascript:">请教高手帮我看下这段代码 FLASH显示不了</a> <a href="javascript:">请教在UTF-8编辑下的符号显示问题 </a> <a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a> <a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来 </a> <a href="javascript:">javascript读取Json数据并分页显示，支持键盘和滚轮翻页 </a> <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a> <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件 2009-7-18 </a> </div> <div> </body> <script> var box=document.getElementById("div1"),can=true; box.innerHTML+=box.innerHTML; box.onmouseover=function(){can=false}; box.onmouseout=function(){can=true}; new function (){ var stop=box.scrollTop%18==0&&!can; if(!stop)box.scrollTop==parseInt(box.scrollHeight/2)?box.scrollTop=0:box.scrollTop++; setTimeout(arguments.callee,box.scrollTop%18?10:1500); }; </script> </html>
下面这2个代码更少：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> code.js.cn </title> <style> a{display:block;font-size:15px;line-height:18px;text-decoration:none;color:#333;font-family:Arial;font-size:12px;} .shell{ background:url(http://bbs.blueidea.com/images/common/xml.gif) no-repeat 4px 5px; border:1px solid #aaa; width:400px; padding:3px 2px 2px 20px; } #div1{ height:18px; overflow:hidden; } </style> </head> <body> <div class="shell"> <div id="div1"> <a href="javascript:">请教高手帮我看下这段代码 FLASH显示不了</a> <a href="javascript:">请教在UTF-8编辑下的符号显示问题 </a> <a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a> <a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来 </a> <a href="javascript:">javascript读取Json数据并分页显示，支持键盘和滚轮翻页 </a> <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a> <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件 2009-7-18 </a> </div> <div> </body> <script> var c,_=Function; with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("c=1"); onmouseout=_("c=0");} (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))(); </script> </html>
不用字符串生成function是不行的，缩的就是这个部分代码里面重复的字符。
其实还真没必要用with,
把with(){}换成四个“o.”，代码长度不是只差一个“;”么？再把重复的“o.innerHTML”给缩了，就更省字了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> code.js.cn </title> <style> a{display:block;font-size:15px;line-height:18px;text-decoration:none;color:#333;font-family:Arial;font-size:12px;} .shell{ background:url(http://bbs.blueidea.com/images/common/xml.gif) no-repeat 4px 5px; border:1px solid #aaa; width:400px; padding:3px 2px 2px 20px; } #div1{ height:18px; overflow:hidden; } </style> </head> <body> <div class="shell"> <div id="div1"> <a href="javascript:">请教高手帮我看下这段代码 FLASH显示不了</a> <a href="javascript:">请教在UTF-8编辑下的符号显示问题 </a> <a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a> <a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来 </a> <a href="javascript:">javascript读取Json数据并分页显示，支持键盘和滚轮翻页 </a> <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a> <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件 2009-7-18 </a> </div> <div> </body> <script> var c,_=Function,o=document.getElementById("div1"),d=o.innerHTML; d+=d;o.onmouseover=_("c=1");o.onmouseout=_("c=0"); (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))(); </script> </html>
var c,_=Function;
with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("c=1"); onmouseout=_("c=0");}
(F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))();
var c;
var _=Function;// “_”是变量名，按最短的名字起就是了
var o=document.getElementById("div1"); // 这里使用变量前，没有声明，o就是全局变量了，不推荐大*这么做
// 把with语句分解了，这样做了以后，代码的可读性和可维护性更好
o.innerHTML+=o.innerHTML;
/*
* 推荐这么写，最常见的方法，就不多解释了
* o.onmouseover = function(){c=1};
*/
o.onmouseover = _("c=1"); // 相当域 new Function("c=1"); 这个就是我说的不推荐大*这么创建函数的地方，执行效率极低。
o.onmouseout = _("c=0");
// F没有先声明，也是new Function创建函数,翻译一下
/*
* (function F(){
* if(o.scrollTop%18||!c){
* o.scrollTop++;
* o.scrollTop%=o.scrollHeight>>1;
* setTimeout(F,#%18?10:1500); // 没有滚完一行，滚动的时间间隔为10ms,滚完一行，停1.5秒再继续滚到下一行
* }
* })() // 一个自执行的闭包函数
*/
(F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))();
新闻向上滚动：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>新闻向上滚动</title> <style type="text/css"> * { padding:0; margin:0; } #list { width:400px; height:100px; margin:50px auto; position:relative; overflow:hidden; } #list ul { position:absolute; top:0; } #list li { height:22px; line-height:22px; } #list li a { color:#333; text-decoration:none; font-size:14px; } #list a:hover { text-decoration:underline; color:#000; } </style> </head> <body> <div id="list"> <ul> <li><a href="#">日本东京都完成钓鱼岛海域非法调查 </a></li> <li><a href="#">北京规定买白加黑等药品需身份证</a></li> <li><a href="#">江苏滨海一民警坠楼身亡 死前刚被局纪委约谈</a></li> <li><a href="#">央视评论员陶伟追悼会举行 生前众好友冒雨送别</a></li> <li><a href="#">***：已建成保障房要尽快入市巩固调控</a></li> </ul> </div> <script type="text/javascript"> window.onload = function() { var list = document.getElementById("list").getElementsByTagName("ul")[0]; var timer = null; list.innerHTML += list.innerHTML; function marquee() { list.style.top = list.offsetTop - 3 + "px"; if(list.offsetTop < -list.offsetHeight/2) { list.style.top = "0px"; } } timer = setInterval(marquee,50); list.onmouseover = function() { clearInterval(timer); } list.onmouseout = function() { timer = setInterval(marquee,30); } } </script> </body> </html>
