上下间歇新闻滚动效果

<!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>

提示：你可以先修改部分代码再运行。

Posted in 前端特效.

Tagged with 滚动, 间歇.

No comments

By yflintao – 2010年02月5日

快过年了，给大家封装个选项卡js，大家新年好啊

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>井底的蛙</title> <script type="text/javascript"> /* 选项卡封装 by 井底的蛙 2008-2-4 */ opCard = function() { this.bind = new Array(); this.index = 0; //默认显示哪个选项卡，从0开始 this.style = new Array(); //["","",""] this.overStyle = false; //选项是否有over, out变换样式事件，样式为this.style[2] this.overChange = false; //内容是否用over, out直接激活 this.menu = false; //菜单类型 this.nesting = [false,false,"",""]; //是否嵌套，后面2个参数是指定menu,info的子集深度所用id this.auto = [false, 1000]; //自动滚动[true,2000] this.timerID = null; //自动播放的 this.menutimerID = null; //菜单延时的 this.creat = function(func) { var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]); var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]); var my = this, i; var argLen = arguments.length; var arrM = new Array(); if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套 { // 过滤出需要的数据 var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu; var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo; } else { var arrMenu = _arrMenu; var arrInfo = _arrInfo; } var l = arrMenu.length; if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。")} // 修正 if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活 // 循环添加各个事件等 for(i=0;i<l;i++) { arrMenu[i].cName = arrMenu[i].className; arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加载样式，菜单的话统一样式 if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器 { if(this.overStyle || this.overChange) // 有over, out 改变样式或者激活 { arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} } arrMenu[i].onclick = function(){if(argLen==1){func()}} arrInfo[i].style.display = "none"; continue; } if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化，菜单的话全部隐藏 arrMenu[i].index = i; //记录自己激活值[序号] arrInfo[i].index = i; if(this.overChange) //有鼠标over, out事件 { arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);} } else //onclick触发 { arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}} if(this.overStyle) // 有over, out 改变样式 { arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} } else // 没有over, out 改变样式 { if(this.auto[0]) // 有自动运行 { arrMenu[i].onmouseover = function(){autoStop(this, 0);} arrMenu[i].onmouseout = function(){autoStop(this, 1);} } } } if(this.auto[0] || this.menu) //arrinfo 控制自动播放 { arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);} arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);} } } //for结束 if(this.auto[0]) { this.timerID = setTimeout(autoMove,this.auto[1]) } // 自动播放 function autoMove() { var n; n = my.index + 1; if(n==l){n=0}; while(arrMenu[n].getAttribute("skip")) // 需要跳过的容器 { n += 1; if(n==l){n=0}; } changeOption(arrMenu[n]); my.timerID = setTimeout(autoMove,my.auto[1]); } // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!! function autoStop(obj, num) { if(!my.auto[0]){return;} //if(obj.index==my.index) num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]); } // 改变选项卡 function changeOption(obj) { arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容 arrInfo[my.index].style.display = "none"; //隐藏旧内容 obj.className = getClass(obj,my.style[1]); //修改为新样式 arrInfo[obj.index].style.display = ""; //显示新内容 my.index = obj.index; //更新当前选择的index } /* 只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活 obj：目标对象。 num：1为over，0为out */ function changeTitle(obj, num) { if(!my.overStyle){return;}; if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])} } /* 菜单类型时用 obj：目标对象。 num：1为over，0为out */ function changeMenu(num) { if(!my.menu){return;} num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) } //关闭菜单 function menuClose() { arrInfo[my.index].style.display = "none"; arrMenu[my.index].className = my.style[0]; } // 得到className（防止将原有样式覆盖） function getClass(o, s) { if(o.cName==""){return s} else{return o.cName + " " + s} } //嵌套情况下得到真正的子集 function getChilds(arrObj, id, num) { var depth = 0; var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一个子集 do //计算深度 { if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1} firstObj = firstObj.parentNode; } while(firstObj.tagName.toLowerCase()!="body") // body强制退出。 var t; var arr = new Array(); for(i=0;i<arrObj.length;i++) //过滤出需要的数据 { t = arrObj[i], d = 0; do { if(t.parentNode.getAttribute("id")==id && d == depth) { arr.push(arrObj[i]);break; //得到数据 } else { if(d==depth){break};d+=1; } t = t.parentNode; } while(t.tagName.toLowerCase()!="body") // body强制退出 } return arr; } } } window.onload = function() { var aa = new opCard(); aa.bind = ["a1","div","b1","div"]; aa.style = ["a1_0","a1_1","a1_0"]; aa.index = 0; aa.nesting = [false,true,"",""] aa.creat(); aa =null; // 默认的onclick中，第一个例子 var bba = new opCard(); bba.bind = ["a2","li","b2","div"]; bba.style = ["style1","style2","style3"]; bba.overStyle = true; bba.creat(); bba = null; // 默认的onclick中，第二个例子 var bbb = new opCard(); bbb.bind = ["a3","li","b3","div"]; bbb.style = ["style1","style2","style3"]; bbb.overStyle = true; bbb.creat(); bbb = null; // onmousover触发中的例子 var cc = new opCard(); cc.bind = ["a4","li","b4","div"]; cc.style = ["style1","style2","style3"]; cc.overStyle = true; cc.overChange = true; cc.creat(); cc = null; //自动播放auto第一个例子 var dd = new opCard(); dd.bind = ["a5","li","b5","div"]; dd.style = ["style1","style2","style3"]; dd.auto = [true, 3000]; dd.creat(); dd = null; //自动播放auto第二个例子 var ee = new opCard(); ee.bind = ["a6","li","b6","div"]; ee.style = ["style1","style2","style3"]; ee.auto = [true, 2000]; ee.overChange = true; ee.creat(); ee = null; //自动播放auto第三个例子 var ff = new opCard(); ff.bind = ["a7","li","b7","div"]; ff.style = ["style1","style2","style3"]; ff.auto = [true, 1000]; ff.overChange = true; ff.overStyle = true; ff.creat(); ff = null; //菜单导航例子 var gg = new opCard(); gg.bind = ["a8","li","b8","div"]; gg.style = ["style1","style2","style3"]; gg.overStyle = true; gg.menu = true; gg.creat(); gg = null; //其他应用 var hh = new opCard(); hh.bind = ["a9","li","a9","li"]; hh.style = ["style4","style4","style4"]; //hh.overStyle = true; hh.auto = [true, 1000]; hh.creat(); hh = null; } </script> <style type="text/css"> body{font-size:12px; font-family:Verdana,"宋体";} p,ul{margin:0px; padding:0px;} td,div{font-size:12px} .a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;} .a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;} .test{text-decoration:underline;} #b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;} #b1 div.s strong{color:#0066FF;} /* */ .style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} .style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} .style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} #a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;} #b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;} #b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;} #b8 div a{margin-right:20px;} .style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;} </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="a1" width="140" valign="top" align="center"> <div class="test">简单介绍</div> <div class="test">默认的onclick</div> <div class="test">onmousover触发</div> <div class="test">自动播放auto</div> <div class="test">菜单导航</div> <div class="test">关于嵌套</div> <div class="test">其他应用</div> <div class="test">一些说明</div> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> </td> <td id="b1" valign="top"> <div class="s"> 封装了一个选项卡，不过已经不像选项卡了-_-!!!<br><br> 现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些<br><br> <p> <strong>obj.bind = ["a1","td","b1","div"];</strong><br> 绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？<br> td标签的数量和div标签的数量必须相同<br> （若不需要显示内容，只显示菜单话，可以这个在td标签上加<td skip="true">）<br> 如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting<br><br> <strong>obj.nesting = [false,true,"",""];</strong><br> 当标签tag有嵌套时，需要用到这个<br> 比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到<br> 菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了<br> 判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断<br> 但有些情况下，这样还是不行<br> 我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];<br> 这样就肯定不会错了（不明白的话看下例子就简单多了）<br><br> <strong>obj.index = 0;</strong><br> 默认显示第几个选项卡，序号从0开始<br><br> <strong>obj.style = ["c1","c2","c3"]</strong><br> 菜单加载的样式的className：<br> 菜单未选中的className是c1<br> 菜单选中的className是c2<br> 菜单onmouseover的className是c3<br><br> <strong>obj.overStyle = false;</strong><br> 选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]<br><br> <strong>obj.overChange = false;</strong><br> 选项卡内容是否用onmouseover, onmouseout直接激活<br><br> <strong>obj.menu = false;</strong><br> 选项卡是菜单类型<br><br> <strong>obj.auto = [false, 1000];</strong><br> 选项卡是否自动播放，播放速度（毫秒）<br><br> <strong>obj.creat();</strong><br> 开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)<br> 所有的都会触发 </p> </div> <div class="s">  <div id="a2"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="b2"> <div>这个例子是用onclick触发的<br>并设置overStyle = true;<br>(over，out改变样式,但不激活)</div> <div> var bba = new opCard();<br> bba.bind = ["a2","li","b2","div"];<br> bba.style = ["style1","style2","style1"];<br> bba.overStyle = true;<br> bba.creat();<br> bba = null; </div> <div>33333</div> <div>4444444</div> </div><br>  <div id="a3"> <ul> <li>1</li> <li>2</li> <li>3</li> <li skip="true">4</li> </ul> </div> <div id="b3"> <div> 这个例子是比上面增加skip="true"<br>即<li skip="true">4</li><br>所以选项卡4是没有内容的<br> 你可以为选项卡的文字直接加上链接，我这里就不加了 </div> <div>222222</div> <div>33333</div> <div>4444444</div> </div> </div> <div class="s">  <div id="a4"> <ul> <li>1</li> <li>2</li> <li skip="true">3</li> <li>4</li> </ul> </div> <div id="b4"> <div>这个例子是用onmouseover触发的<br>(over，out直接激活)<br>并且<li skip="true">3</li>[选项卡3不会被激活]<br>overStyle = true;</div> <div> var cc = new opCard();<br> cc.bind = ["a4","li","b4","div"];<br> cc.style = ["style1","style2","style1"];<br> cc.overStyle = true;<br> cc.overChange = true;<br> cc.creat();<br> cc = null; </div> <div>33333</div> <div>4444444</div> </div> </div> <div class="s">  <div id="a5"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="b5"> <div>1111111<br>我每3秒切换一个选项卡</div> <div> var ee = new opCard();<br> ee.bind = ["a6","li","b6","div"];<br> ee.style = ["style1","style2","style1"];<br> ee.auto = [true, 2000];<br> ee.overChange = true;<br> ee.creat();<br> ee = null; </div> <div>33333<br>我每3秒切换一个选项卡</div> <div>4444444<br>我每3秒切换一个选项卡</div> </div> <div>注：<strong>鼠标在选项卡任意位置都会使停止播放</strong><br><br>下面这个结合overChange一起</div>  <div id="a6"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="b6"> <div>1111111<br>我每2秒切换一个选项卡</div> <div> var dd = new opCard();<br> dd.bind = ["a5","li","b5","div"];<br> dd.style = ["style1","style2","style1"];<br> dd.auto = [true, 3000];<br> dd.creat();<br> dd = null;<br> </div> <div>33333<br>我每2秒切换一个选项卡</div> <div>4444444<br>我每2秒切换一个选项卡</div> </div> <div><br>下面这个再来个<li skip="true">3</li>，且overStyle=true;</div>  <div id="a7"> <ul> <li>1</li> <li>2</li> <li skip="true">3</li> <li>4</li> </ul> </div> <div id="b7"> <div>1111111<br>我每1秒切换一个选项卡</div> <div> var ff = new opCard();<br> ff.bind = ["a7","li","b7","div"];<br> ff.style = ["style1","style2","style1"];<br> ff.auto = [true, 1000];<br> ff.overChange = true;<br> ff.overStyle = true;<br> ff.creat();<br> ff = null; </div> <div>33333<br>我每1秒切换一个选项卡</div> <div>4444444<br>我每1秒切换一个选项卡</div> </div> </div>  <div class="s"> <div id="a8"> <ul> <li skip="true">首页</li> <li>新闻</li> <li>论坛</li> <li skip="true">联系我们</li> </ul> </div> <div id="b8"> <div></div> <div><a href="#">国内新闻</a><a href="#">国际新闻</a><a href="#">娱乐新闻</a><a href="#">体育新闻</a></div> <div><a href="#">蓝色理想</a><a href="#">blue idea</a></div> <div></div> </div> <div><strong>注：菜单延时一秒关闭</strong><br>这里只是演示，实际可以设置下position什么的。-o-<br>多级菜单不知道能不能支持，没试过</div> </div> <div class="s"> 我见过的许多选项卡都不能用来嵌套<br>但还是有些时候会用到的<br> 所以如您所见，这个演示本身就是一个嵌套，效果还不错 </div>  <div class="s"> 比如图片切换什么，不过我太懒了，不写了。。。<br> 这个能干什么，我也不知道。。 <div id="a9"> <li>新年好啊</li> <li>快过年了</li> <li>天好冷啊</li> <li>大家去抢红包吧</li> <li>红包~！红包~！你在哪里啊？</li> </div> </div> <div class="s"> 选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错<br>即使选项卡菜单skip="true"，内容也要放一个空的标签占位<br> 其他好像暂时没发现什么<br><br> 本来打算加入ajax的，但有些还没想好。<br> 效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错<br><br> 写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异<br> 本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。<br><br> 哦，还有选项卡是附加样式，不会取消原本设置的样式<br> 如左边的下划线是原有的样式 </div> <div class="s">啥都没有1</div> <div class="s">啥都没有2</div> <div class="s">啥都没有3</div> <div class="s">啥都没有4</div> </td> </tr> </table> </body> </html>

提示：你可以先修改部分代码再运行。

Posted in 前端特效.

Tagged with JS, 选项卡.

No comments

By yflintao – 2010年02月5日

正在加载网页的进度条,加载完后，自动消失

提示：你可以先修改部分代码再运行。

————————————-

<html> <head> <style type="text/css"> /*Loader ----------------------------------------------*/ #loader_container { text-align:center; position:absolute; top:60%; width:100%; left: 0; } #loader { font-family:Tahoma, Helvetica, sans; font-size:11.5px; color: #abc; background-color:#000; padding:10px 0 16px 0; margin:0 auto; display:block; width:130px; border:1px solid #abc; text-align:left; z-index:2; } #loader_bg {background-color: #abc; position:relative; top:8px; left:8px; height:7px; width:113px; font-size:1px} #progress { height:5px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color: #fff; } </style> <script type="text/javascript"> var t_id = setInterval(animate,20); var pos=0; var dir=2; var len=0; function animate() { var elem = document.getElementById('progress'); if(elem != null) { if (pos==0) len += dir; if (len>32 || pos>79) pos += dir; if (pos>79) len -= dir; if (pos>79 && len==0) pos=0; elem.style.left = pos; elem.style.width = len; } } function remove_loading() { this.clearInterval(t_id); var targelem = document.getElementById('loader_container'); targelem.style.display='none'; targelem.style.visibility='hidden'; } </script> </head> <body onLoad="remove_loading();"> <div id="loader_container" onclick="this.style.display='none'" title="点击关闭"> <div id="loader"> <div align="center">网页正在载入中 ...</div> <div id="loader_bg"><div id="progress"> </div></div> </div> </div> <img src="http://static.flickr.com/25/57001474_6d174fdce4_o_d.jpg" /> </body> </html>

提示：你可以先修改部分代码再运行。

————————

提示：你可以先修改部分代码再运行。

Posted in 前端特效.

Tagged with loading, 加载.

No comments

By yflintao – 2010年02月2日

JS清空代码防止查看源代码

<html> <head> <script language="javascript"> function clear(){ Source=document.body.firstChild.data; document.open(); document.close(); document.title="看不到源代码"; document.body.innerHTML=Source; } </script> </head> <body onload=clear()>  </body> </html>

提示：你可以先修改部分代码再运行。

Posted in 前端特效.

Tagged with JS, 源码.

No comments

By yflintao – 2010年02月2日

鼠标划上标题，显示详细信息的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>资讯中心-关于宇通-宇通集团</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <base href="http://www.yutong.com/"/> <link rel="stylesheet" href="/css_yt/about.css" type="text/css" media="all"/> </head> <body id="about"> <div id="container" class="clear"> <div id="content"> <div class="ui-tabs-panel"> <div class="news_list" class="clear"> <dl id="newsList"> <dt><span>2010-1-4</span><a href="/about/news.jsp#0">[宇通动态] </a><em>宇通重工数创喜人佳绩工程起重机频出订单</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925eccba80125f7045a4f0003&picPath=2c9e819925eccba80125f7045a4f0003/2.jpg" title='宇通重工数创喜人佳绩工程起重机频出订单' class="thickbox12"><img src="/upload/cmsobj/2c9e819925eccba80125f7045a4f0003/2.jpg" width="87" height="66" alt="宇通重工数创喜人佳绩工程起重机频出订单" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925eccba80125f7045a4f0003&picPath=2c9e819925eccba80125f7045a4f0003/2.jpg" title='宇通重工数创喜人佳绩工程起重机频出订单' class="thickbox12">宇通重工数创喜人佳绩工程起重机频出订单</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925eccba80125f7045a4f0003&picPath=2c9e819925eccba80125f7045a4f0003/2.jpg" title='宇通重工数创喜人佳绩工程起重机频出订单' class="thickbox12">服务带动效应，提升品牌优势！2009年12月，宇通重工工程起重机事业部又迎来一个销售高峰月。截止到本月底，工程起重机事业部已经销售7台设备，可喜的成绩让整个部门一片喜气洋洋，也是为...</a></p> </div> </dd> <dt><span>2009-12-24</span><a href="/about/news.jsp#2" >[媒体聚焦] </a><em>宇通创立“YES”电泳标准</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125be4d09e20016&picPath=2c9e819925b020cb0125be4d09e20016/ht.jpg" title='宇通创立“YES”电泳标准' class="thickbox12"><img src="/upload/cmsobj/2c9e819925b020cb0125be4d09e20016/ht.jpg" width="87" height="66" alt="宇通创立“YES”电泳标准" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125be4d09e20016&picPath=2c9e819925b020cb0125be4d09e20016/ht.jpg" title='宇通创立“YES”电泳标准' class="thickbox12">宇通创立“YES”电泳标准</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125be4d09e20016&picPath=2c9e819925b020cb0125be4d09e20016/ht.jpg" title='宇通创立“YES”电泳标准' class="thickbox12">近日, 宇通客车创立了客车行业首个、世界顶级水准的“YES”(Yutong Electrocoating Standard)电泳标准,结束了客车行业无电泳标准的尴尬,带给消费者更...</a></p> </div> </dd> <dt><span>2009-12-23</span><a href="/about/news.jsp#0" >[宇通动态] </a><em>国家发改委领导调研宇通</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125ba2d3529000e&picPath=2c9e819925b020cb0125ba2d3529000e/2.jpg" title='国家发改委领导调研宇通' class="thickbox12"><img src="/upload/cmsobj/2c9e819925b020cb0125ba2d3529000e/2.jpg" width="87" height="66" alt="国家发改委领导调研宇通" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125ba2d3529000e&picPath=2c9e819925b020cb0125ba2d3529000e/2.jpg" title='国家发改委领导调研宇通' class="thickbox12">国家发改委领导调研宇通</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125ba2d3529000e&picPath=2c9e819925b020cb0125ba2d3529000e/2.jpg" title='国家发改委领导调研宇通' class="thickbox12">12月19日下午，国家发改委副主任徐宪平一行15人，在副省长张大卫，省发改委主任张维宁，市委常委、常务副市长胡荃等省市领导陪同下调研宇通。</a></p> </div> </dd> <dt><span>2009-12-23</span><a href="/about/news.jsp#0" >[宇通动态] </a><em>宇通首届“创新节”活动启动</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125ba2bfd45000d&picPath=2c9e819925b020cb0125ba2bfd45000d/2.jpg" title='宇通首届“创新节”活动启动' class="thickbox12"><img src="/upload/cmsobj/2c9e819925b020cb0125ba2bfd45000d/2.jpg" width="87" height="66" alt="宇通首届“创新节”活动启动" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125ba2bfd45000d&picPath=2c9e819925b020cb0125ba2bfd45000d/2.jpg" title='宇通首届“创新节”活动启动' class="thickbox12">宇通首届“创新节”活动启动</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125ba2bfd45000d&picPath=2c9e819925b020cb0125ba2bfd45000d/2.jpg" title='宇通首届“创新节”活动启动' class="thickbox12">12月16日，公司发布了《关于举办宇通首届“创新节”活动》通知，首届宇通“创新节”活动正式面向集团全体员工征集创意项目。</a></p> </div> </dd> <dt><span>2009-12-22</span><a href="/about/news.jsp#2" >[媒体聚焦] </a><em>2009中国客车业“新闻摘要”</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125b520224e0005&picPath=2c9e819925b020cb0125b520224e0005/ht.jpg" title='2009中国客车业“新闻摘要”' class="thickbox12"><img src="/upload/cmsobj/2c9e819925b020cb0125b520224e0005/ht.jpg" width="87" height="66" alt="2009中国客车业“新闻摘要”" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125b520224e0005&picPath=2c9e819925b020cb0125b520224e0005/ht.jpg" title='2009中国客车业“新闻摘要”' class="thickbox12">2009中国客车业“新闻摘要”</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125b520224e0005&picPath=2c9e819925b020cb0125b520224e0005/ht.jpg" title='2009中国客车业“新闻摘要”' class="thickbox12">2009年，当年初“客车行业能否继续增长”的命题被提出时，几乎所有人都持悲观态度；但到了三、四季度，我们惊奇地发现，中国客车市场其实并不像想象中那样脆弱。</a></p> </div> </dd> <dt><span>2009-12-22</span><a href="/about/news.jsp#2" >[媒体聚焦] </a><em>宇通客车祭出春运组合拳提前50天备战春运</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125b51d54590003&picPath=2c9e819925b020cb0125b51d54590003/ht.jpg" title='宇通客车祭出春运组合拳提前50天备战春运' class="thickbox12"><img src="/upload/cmsobj/2c9e819925b020cb0125b51d54590003/ht.jpg" width="87" height="66" alt="宇通客车祭出春运组合拳提前50天备战春运" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125b51d54590003&picPath=2c9e819925b020cb0125b51d54590003/ht.jpg" title='宇通客车祭出春运组合拳提前50天备战春运' class="thickbox12">宇通客车祭出春运组合拳提前50天备战春运</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e819925b020cb0125b51d54590003&picPath=2c9e819925b020cb0125b51d54590003/ht.jpg" title='宇通客车祭出春运组合拳提前50天备战春运' class="thickbox12">尽管距离春运还有50多天，春运备战却已在客车企业率先打响。近日，连续7年进行春运专项服务活动的宇通公司再次未雨绸缪，宣布正式启动2010年春运服务活动。通过派发《优秀驾驶员十个好习...</a></p> </div> </dd> <dt><span>2009-12-9</span><a href="/about/news.jsp#2" >[媒体聚焦] </a><em>宇通“年末围城”</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199255c48ae0125724013400011&picPath=2c9e8199255c48ae0125724013400011/ht.jpg" title='宇通“年末围城”' class="thickbox12"><img src="/upload/cmsobj/2c9e8199255c48ae0125724013400011/ht.jpg" width="87" height="66" alt="宇通“年末围城”" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199255c48ae0125724013400011&picPath=2c9e8199255c48ae0125724013400011/ht.jpg" title='宇通“年末围城”' class="thickbox12">宇通“年末围城”</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199255c48ae0125724013400011&picPath=2c9e8199255c48ae0125724013400011/ht.jpg" title='宇通“年末围城”' class="thickbox12">通过11、12月的旺销，宇通正在为其全年持平的基本目标画上最后一道“弧线”。</a></p> </div> </dd> <dt><span>2009-12-4</span><a href="/about/news.jsp#0" >[宇通动态] </a><em>郑州市人大常委会主任白红战率人大代表考察团来访宇通重工</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba012558decfff0047&picPath=2c9e8199250ac1ba012558decfff0047/bairenzhan1.jpg" title='郑州市人大常委会主任白红战率人大代表考察团来访宇通重工' class="thickbox12"><img src="/upload/cmsobj/2c9e8199250ac1ba012558decfff0047/bairenzhan1.jpg" width="87" height="66" alt="郑州市人大常委会主任白红战率人大代表考察团来访宇通重工" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba012558decfff0047&picPath=2c9e8199250ac1ba012558decfff0047/bairenzhan1.jpg" title='郑州市人大常委会主任白红战率人大代表考察团来访宇通重工' class="thickbox12">郑州市人大常委会主任白红战率人大代表考察团来访宇通重工</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba012558decfff0047&picPath=2c9e8199250ac1ba012558decfff0047/bairenzhan1.jpg" title='郑州市人大常委会主任白红战率人大代表考察团来访宇通重工' class="thickbox12">郑州市人大常委会主任白红战率人大代表考察团来访——就郑州市地税局“优质服务企业情况”进行专题调研，同时勉励我“宇通重工”加强产品研发力度，提升产品推广能力，扩大销售和研发队伍，为郑...</a></p> </div> </dd> <dt><span>2009-12-1</span><a href="/about/news.jsp#2" >[媒体聚焦] </a><em>价值宇通点石成金</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba01254839f8d9002d&picPath=2c9e8199250ac1ba01254839f8d9002d/ht.jpg" title='价值宇通点石成金' class="thickbox12"><img src="/upload/cmsobj/2c9e8199250ac1ba01254839f8d9002d/ht.jpg" width="87" height="66" alt="价值宇通点石成金" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba01254839f8d9002d&picPath=2c9e8199250ac1ba01254839f8d9002d/ht.jpg" title='价值宇通点石成金' class="thickbox12">价值宇通点石成金</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba01254839f8d9002d&picPath=2c9e8199250ac1ba01254839f8d9002d/ht.jpg" title='价值宇通点石成金' class="thickbox12"> 当“宇通杯”在交通运输部报告厅圆满落幕以后，客车行业的人士都说，“宇通赚了”。“宇通杯”让企业的营销活动升级为官方的全国推广，从范围来讲，“宇通杯”超出了企业的个体能力，从影响...</a></p> </div> </dd> <dt><span>2009-11-30</span><a href="/about/news.jsp#0" >[宇通动态] </a><em>宇通13.7米混合动力公交批量交付</em></dt> <dd class="clear"> <div class="news_pic"><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba012542c5b04d0027&picPath=2c9e8199250ac1ba012542c5b04d0027/20091130FSL.jpg" title='宇通13.7米混合动力公交批量交付' class="thickbox12"><img src="/upload/cmsobj/2c9e8199250ac1ba012542c5b04d0027/20091130FSL.jpg" width="87" height="66" alt="宇通13.7米混合动力公交批量交付" /></a></div> <div class="news_quote"> <h5><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba012542c5b04d0027&picPath=2c9e8199250ac1ba012542c5b04d0027/20091130FSL.jpg" title='宇通13.7米混合动力公交批量交付' class="thickbox12">宇通13.7米混合动力公交批量交付</a></h5> <p><a href="/about/search.do?method=searchDetailsNewsPop&oid=2c9e8199250ac1ba012542c5b04d0027&picPath=2c9e8199250ac1ba012542c5b04d0027/20091130FSL.jpg" title='宇通13.7米混合动力公交批量交付' class="thickbox12">1月27日上午，“ 科技领航价值（节能）典范——宇通客车•郑州公交ZK6140MGQA9混合动力公交车交车仪式”在郑州宇通工业园内拉开了序幕。10台即将交付使用的宇通13.7米混...</a></p> </div> </dd> </dl> </div> </div> </div> </div> <script type="text/javascript"> //<![CDATA[ (function(){ var news = document.getElementById('newsList'); if(news == null)return; var items = [ news.getElementsByTagName('dt'), news.getElementsByTagName('dd') ], curMenu=0;//默认第一条新闻处于展开状态 if(items[0].length != items[1].length)return alert('列表标题与内容没有一一对应!'); var em, showItem = function(){//鼠标移动到每个dt里面的em时,触发的函数 items[0][curMenu].className = '';//清除上一个显示的 dt 的样式 items[1][curMenu].className = 'clear';//清除上一个显示的 dd 的样式 this.parentNode.className = 'dt_current';//改变dt的样式 items[1][this['index']].className = 'dd_current';//改变dd的样式 curMenu = this['index'];//将当前的索引赋值给 curMenu }; for(var i=items[0].length; i--; ){ em = items[0][i].getElementsByTagName('em'); if(em.length < 1)return alert('第'+i+'个新闻标题生成的格式不正确,没有包含 em 标签!'); em[0]['index'] = i; em[0].onmouseover = showItem; } showItem.call(items[0][curMenu].getElementsByTagName('em')[0]);//根据curMenu的值,激活相应的新闻 })(); //]]> </script> </body> </html>

提示：你可以先修改部分代码再运行。

Posted in 前端特效.

Tagged with 提示, 鼠标.

No comments

By yflintao – 2010年02月2日

仿google导航条

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>仿google导航条</title> <style type="text/css"> *{ margin:0px; padding:0px; } body{ font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:29px; } a{ text-decoration:none; color:#000000; cursor:pointer; } a:hover{ color:#0000CC; text-decoration:underline; cursor:pointer; } span{ display:block; width:53px; height:37px; text-align:center; } ul{ list-style:none; width:460px; margin:10px auto; } ul li{ float:left; width:53px; height:37px; margin-left:5px; } .about{ background-image:url(http://www.itemvendor.com/img/svc_sprite_all.png); background-position:0px 0px; background-repeat:no-repeat; } .feeds{ background-image:url(http://www.itemvendor.com/img/svc_sprite_all.png); background-position:0px -37px; background-repeat:no-repeat; } .leaveword{ background-image:url(http://www.itemvendor.com/img/svc_sprite_all.png); background-position:0px -74px; background-repeat:no-repeat; } .linker{ background-image:url(http://www.itemvendor.com/img/svc_sprite_all.png); background-position:0px -111px; background-repeat:no-repeat; } .config{ background-image:url(http://www.itemvendor.com/img/svc_sprite_all.png); background-position:0px -148px; background-repeat:no-repeat; } .friend{ background-image:url(http://www.itemvendor.com/img/svc_sprite_all.png); background-position:0px -185px; background-repeat:no-repeat; } </style> <script type="text/javascript"> Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; }; }; var $EL = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var getElementsByClass = function(searchClass,node,tag){ var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; }; var addEventHandler = function(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; var getTarget = function(e){ var target = window.event ? window.event.srcElement : e ? e.target : null; if(!target){return false;} while(target.nodeType != 1 && target.nodeName.toLowerCase() != 'body'){ target = target.parentNode; }; return target; }; var cancelClick = function(e){ if (window.event){ window.event.cancelBubble = true; window.event.returnValue = false; }; if (e && e.stopPropagation && e.preventDefault){ e.stopPropagation(); e.preventDefault(); }; }; var googleNav = { initElem:function(){ var aElem = document.getElementsByTagName("a"); var isIE = navigator.appName.indexOf("msie") > -1, isIE7 = navigator.appName.indexOf("msie 7") > -1; // remove css image flicker if(isIE && !isIE7){ try{ document.execCommand("BackgroundImageCache", false, true); }catch(e){} } for(var i = 0; i < aElem.length; i++){ var curAhref = aElem[i]; addEventHandler(curAhref,"mouseover", g.switchAct, false); addEventHandler(curAhref,"mouseout", g.switchAct, false); } } } var g = { switchAct:function(e){ var t = getTarget(e); while(t.nodeName.toLowerCase()!='a'){ t = t.parentNode; } var gd = new GoogleMenu(t,e.type); } } function GoogleMenu(obj,etype){ this.inv = 60; this.rel = obj.rel; this.idx = obj.lang; this.top = 37 * (this.idx - 1); this.left = false; this.curSpan = getElementsByClass((this.rel).toString(),$EL('nav'),"SPAN")[0]; if(etype.toLowerCase() == "mouseover"){ this.blowup(this); } if(etype.toLowerCase() == "mouseout"){ this.reduce(this); } } GoogleMenu.prototype = { blowup:function(obj){ for(var i = 0; i < 7; i++){ (function(){ var pos = i; setTimeout(function(){ var left = (pos * 52); obj.left = left; obj.curSpan.style.backgroundPosition = "-" + left + "px -" + obj.top + "px"; },obj.inv * pos); })(); } }, reduce:function(obj){ var j = 0; for(var i = 7; i > 0; i--){ (function(){ var pos = i; ++j; setTimeout(function(){ var left = (pos * 52); obj.curSpan.style.backgroundPosition = "-" + left + "px -" + obj.top + "px"; },obj.inv * j); setTimeout(function(){ obj.curSpan.style.backgroundPosition = "0px -"+obj.top +"px" },obj.inv * 7); })(); } } } addEventHandler(window,"load", googleNav.initElem, false); </script> </head> <body> <ul class="nav" id="nav"> <li><a href="#" rel="about" rev="关于" lang="1"><span class="about"></span><span>关于</span></a></li> <li><a href="#" rel="feeds" rev="博客" lang="2"><span class="feeds"></span><span>博客</span></a></li> <li><a href="#" rel="leaveword" rev="留言" lang="3"><span class="leaveword"></span><span>留言</span></a></li> <li><a href="#" rel="linker" rev="链接" lang="4"><span class="linker"></span><span>链接</span></a></li> <li><a href="#" rel="config" rev="设置" lang="5"><span class="config"></span><span>设置</span></a></li> <li><a href="#" rel="friend" rev="好友" lang="6"><span class="friend"></span><span>好友</span></a></li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

Posted in 前端特效.

Tagged with google, 导航.

No comments

By yflintao – 2010年02月2日

支付宝弹出效果的简洁版

<!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" lang="zh" xml:lang="zh"> <HEAD> <TITLE></TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} body{font-size:12px;} /* 快速导航 */ #MyMenu{ margin: 10px auto; width: 760px;background: url(https://img.alipay.com/img/myalipay/Account_Title_BgC.gif) repeat-x; height: 36px;} .MyMenubg{background: url(https://img.alipay.com/img/myalipay/Account_Title_Bg.gif) no-repeat;} #QuickMenu{background: url(https://img.alipay.com/img/myalipay/Account_Title_Bg.gif) no-repeat right -36px;text-align:left;} #QuickMenu a{font-size:12px;color:#003599;text-decoration:none;} #QuickMenu a:hover,#QuickMenu a:active{color:#FF6B00;} #QuickMenu span a.cc:hover ,#QuickMenu a.cc:active span{background: url(https://img.alipay.com/img/myalipay/MyMenu_bg_on.gif) no-repeat 0px 6px;} #QuickMenu span a.cc {cursor:pointer;display:block;background: url(https://img.alipay.com/img/myalipay/MyMenu_bg.gif) no-repeat 0px 6px;margin:0px 0px 0px 10px;width:154px;height:23px;padding:11px 5px 0px 25px;} #MyMenuLinks{border:1px solid #FE7E25;background:#FCD5AA;padding:3px;text-align:left;top:-3px;left:20px;width:240px;float:left;} #MyMenuLinks *{margin:0px;padding:0px;line-height:20px;} #MyMenuLinks li {color:#003599;font-weight:bold;float:left;width:208px;padding-bottom:15px;} #MyMenuLinks li.home a{display:block;border:1px solid #FFBD80;background:#FCF6DC url(https://img.alipay.com/img/myalipay/MyMenu_home.gif) no-repeat 45px 5px;text-align:center;font-weight:normal;} #MyMenuLinks ul{clear:left;list-style:none;border:1px solid #FBDDB9;background:#FFF;width:208px;padding:15px 15px 0px 15px;float:left;} #MyMenuLinks ul ul{border:1px solid #FFF;background:#FFF;width:200px;padding:0px;} #MyMenuLinks li li{font-weight:normal;width:90px;background:url(https://img.alipay.com/img/myalipay/MyMenu_Li_bg.gif) no-repeat 0px 6px;padding:0px 0px 0px 10px;} #all-links, #flying{display:none;margin-left:-35px;position:absolute;left:0;top:30px;} #flying{background:#fff;border:1px dashed #ccc;top:0;} #enter{position: relative;width:184px;} </STYLE> </HEAD> <BODY> <DIV id=MyMenu> <DIV class=MyMenubg> <DIV id=QuickMenu> <div id="enter"> <span><A id=cc href="#" class="cc">支付宝快速入口</A></span> <div id="flying"></div> <DIV id=all-links style="display:none;"> <DIV id=MyMenuLinks> <UL> <LI class=home><A class=R href="https://www.alipay.com/user/ma_index.htm">我的支付宝首页</A> </LI> <LI>账户管理 <UL> <LI><A href="https://www.alipay.com/user/account_balance.htm">账户余额查询</A> </LI> <LI><A href="https://www.alipay.com/user/user_info_console.htm">账户信息管理</A> </LI> <LI><A href="https://www.alipay.com/user/unicard_wizard.htm">支付宝卡通</A> </LI> </UL> </LI> <LI>资金管理 <UL> <LI><A href="https://www.alipay.com/user/inpour_request.htm">充值</A> </LI> <LI><A href="https://www.alipay.com/user/draw_request.htm">提现</A> </LI> <LI><A href="https://www.alipay.com/user/query_account_detail.htm">账户明细查询</A> </LI> <LI><A href="https://www.alipay.com/user/draw_request_query.htm">提现申请查询</A> </LI> </UL> </LI> <LI>增值服务 <UL> <LI><A href="https://www.alipay.com/securitycenter/sc_index.htm">安全中心</A> </LI> <LI><A href="https://www.alipay.com/user/mobile_center.htm">手机服务</A> </LI> <LI><A href="https://www.alipay.com/user/customize_information.htm">信使</A> </LI> <LI><A href="https://www.alipay.com/static/production/index_ma.htm">产品中心</A> </LI> </UL> </LI> </UL> </DIV> </DIV> </div> </DIV> </DIV> </DIV> <script type="text/javascript"> var $ = function(id){ return typeof id == 'string' ? document.getElementById(id) : id; } var flying = function(obj, w, h, callback){ var d = 10; var index = 0; var extend = 50; var step = {width:(w+extend)/d, height:(h+extend)/d, top:30/d}; var only; clearInterval(only); obj.style.display = 'block'; only = setInterval( function(){ index++; obj.style.width = ( index * step.width) + 'px'; obj.style.height = ( index * step.height) + 'px'; obj.style.top = ( index * step.top) + 'px'; obj.style.marginLeft = ( 0 - (index * step.width - 150))/2 + 'px'; if(index > d){ clearInterval(only); if(typeof callback == 'function') callback(obj); } } ,10); } var timer; $('enter').onmouseover = function(){ clearTimeout(timer); timer = setTimeout(function(){ if($('all-links').style.display == 'none'){ new flying($('flying'), 248, 293, function(obj){ $('all-links').style.display = 'block'; obj.style.display = 'none'; }); document.title = 'over--'+Math.random(); } },200); } $('enter').onmouseout = function(){ clearTimeout(timer); timer = setTimeout(function(){ $('all-links').style.display = 'none'; document.title = 'out--'+Math.random(); },200); } </script> </BODY> </html>

提示：你可以先修改部分代码再运行。

Posted in 前端特效.

Tagged with 支付宝, 淘宝.

No comments

By yflintao – 2010年02月2日

符合标准的网页右侧跟随滚动条而滚动的图片

Continued…

Posted in 前端特效.

Tagged with AD, 滚动.

No comments

By yflintao – 2010年02月2日

图文排版

图片放前面，给图片添加属性：
align=”right”
Continued…

Posted in 前端特效.

Tagged with 图文, 排版.

No comments

By yflintao – 2010年02月1日

土豆网评论效果，描述和全部的效果

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js深入学习</title> <style> #comment{ margin:0px auto; width:500px;} #comment div{ width:500px; border-bottom:1px solid #ccc; margin:0 0 10px 0; padding:10px 0;} #comment p{ line-height:150%; font-size:12px; color:#0066CC; display:inline;} #comment a{ font-size:12px; color:#999; line-height:150%; margin:0 0 0 10px;text-decoration:underline; display:none; cursor:pointer;} #comment a:hover{text-decoration:none; } </style> </head> <body> <div id="comment"> <div><p>11111111111第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p id="teshu">2222222222222第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>333333333第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>444444444444第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>555555555555第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div> <p>6666666666</p><a>更多>></a></div> <div><p>777777777777第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>888888888888第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>9999999999999第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>1010101010第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>11111111111第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p id="teshu">2222222222222第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>333333333第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>444444444444第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>555555555555第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div> <p>6666666666</p><a>更多>></a></div> <div><p>777777777777第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>888888888888第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>9999999999999第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>1010101010第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> </div> <script> function checkWords(elementID){ function updata(i){ var elementHtml= elementP[i].innerHTML; var elementLength= elementHtml.length; if( elementLength > 60){ var moreBtn=elementP[i].nextSibling; var closeBtn=moreBtn.nextSibling; elementP[i].innerHTML=(elementP[i].innerHTML.substr(0,60)+'...'); moreBtn.style.display="inline-block"; //查看更多 moreBtn.onclick=function(){ elementP[i].innerHTML=elementHtml; this.style.display="none"; closeBtn.style.display="inline-block"; return false; } //收起查看更多 closeBtn.onclick=function(){ elementP[i].innerHTML=(elementP[i].innerHTML.substr(0,60)+'...'); this.style.display="none"; moreBtn.style.display="inline-block"; return false; } } } var elementDiv= document.getElementById(elementID); var elementP= elementDiv.getElementsByTagName('p'); for( i=0; i<elementP.length; i++){ updata(i); } } </script> <script> checkWords('comment'); </script> </body> </html>

上下间歇新闻滚动效果

快过年了，给大家封装个选项卡js，大家新年好啊

正在加载网页的进度条,加载完后，自动消失

JS清空代码防止查看源代码

鼠标划上标题，显示详细信息的JS效果

仿google导航条

支付宝弹出效果的简洁版

符合标准的网页右侧跟随滚动条而滚动的图片

图文排版

土豆网评论效果，描述和全部的效果

分类目录

最近文章

最近评论

链接表

2010年二月
一	二	三	四	五	六	日
« 一
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Subscribe

分类目录

标签

最近文章

最近评论

链接表