新闻图片点击滚动特效....
<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><a href='http://www.sealee.com/' target='_blank'><u>海乐网</u></a>-<a href='http://www.sealee.com/jscode/' target='_blank'><u>网页特效</u></a>频道|www.sealee.com/jscode/|-新闻图片点击滚动特效</title> <style type="text/css"> <!-- /* 通用 */ body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,table,td,th,form,fieldset,img{margin:0;padding:0;} textarea,input,select,body{font-size:12px;} select,input{vertical-align:middle;} fieldset,img{border:0;} ul,ol{list-style:none;} h3{font-weight:normal;} h4{font-weight:normal;} a:link{color:#000;text-decoration:underline;} a:visited{color:#800080;} a:hover{color:#f00;} .clearit{clear:both;font-size:0;line-height:0;height:0;} body{color:#000;text-align:center;background:#fff;} .blk_04{height:125px;overflow:hidden;background:#fff;border-left:1px solid #f1c19b;border-right:1px solid #f1c19b;} .blk_04 .LeftBotton{width:9px;height:125px;float:left;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) no-repeat -50px -800px;cursor:pointer;} .blk_04 .RightBotton{width:9px;height:125px;float:left;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) no-repeat -100px -800px;cursor:pointer;} .blk_04 .Cont{width:720px;margin-left:5px;padding:6px 0 0;overflow:hidden;} .blk_04 .ScrCont{width:10000000px;} .blk_04 .box{width:120px;float:left;text-align:center;} .blk_04 .box a img{width:89px;height:61px;padding:7px 10px 24px 9px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) no-repeat 0 -1700px;} .blk_04 .box a:hover img{background-position:-125px -1700px;} .blk_04 .box p{line-height:20px;padding-top:2px;} .blk_04 .box .videoIco{padding-left:14px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) no-repeat -200px -850px;color:#ef6800;} .blk_04 .box a:link,.blk_04 .box a:visited{text-decoration:none;} .blk_04 .box a:hover{text-decoration:underline;} .blk_04 #List1,.blk_04 #List2{float:left;} /* 标题 */ .Title_01{height:26px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) repeat-x 0 -1200px;border:1px solid #f1c19b;padding-left:2px;overflow:hidden;} .Title_01 .dot{width:12px;height:26px;float:left;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) no-repeat 5px -1840px;} /*20080714 cfy*/ .Title_01 .title{width:104px;float:left;padding:5px 0 0 6px;font-size:15px;color:#d35001;} /*20080714 cfy*/ .Title_01 .title{float:left;padding:5px 0 0 8px;font-size:15px;color:#d35001;} .Title_01 .more{float:right;padding:6px 10px 0 0;font-size:12px;font-weight:normal;color:#595d5c;} .Title_01 .more a:link,.Title_01 .more a:visited{color:#595d5c;text-decoration:none;color:#d44f00;} .Title_01 .more a:hover{color:#f00;text-decoration:underline;} .Title_01 .title a:link,.Title_01 .title a:visited{color:#d35001;text-decoration:none;} .Title_01 .title a:hover{color:#f00;text-decoration:underline;} #ArrLeft{width:17px;height:17px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) repeat-x 0 -800px;cursor:pointer;} #ArrRight{width:17px;height:17px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) repeat-x -20px -800px;cursor:pointer;} #dotList{padding:0 5px;} #dotList .dotOFF{width:10px;height:17px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) repeat-x 0px -873px;cursor:pointer;} #dotList .dotON{width:10px;height:17px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) repeat-x -10px -873px;cursor:pointer;} .Title_01 .search{float:right;padding:2px 80px 0 0;color:#d44f00;font-size:12px;} .Title_01 .Button01{width:45px;height:21px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) no-repeat -200px -800px;border:none; letter-spacing:2px;*padding-top:2px;} .Title_01 .Input01{border:1px solid #bbbbbb;padding:2px 2px 1px;background:url(http://i2.sinaimg.cn/blog/08index/blog_mj_002_4.gif) repeat-x 0 -200px #fff;height:14px;color:#7b7b7b;} .Title_01 .letter{color:#d24f01;float:right;padding:6px 15px 0 0;font-size:12px;font-weight:normal;} .Title_01 .letter a:link,.Title_01 .letter a:visited{color:#d24f01;text-decoration:none;margin-left:10px;font-size:14px;} .Title_01 .letter a:hover{color:#f00;text-decoration:underline;} --> </style> </head> <body> <div class="P_Right"> <!-- Right begin --> <!-- 视频video begin --> <h2 class="Title_01"> <span class="title"><a href="http://v.sina.com.cn/" _fcksavedurl="http://v.sina.com.cn/"><img src="http://i1.sinaimg.cn/blog/08index/blog_mj_007.gif" _fcksavedurl="http://i1.sinaimg.cn/blog/08index/blog_mj_007.gif" class="TitName_001" alt="视频" /></a></span> <span class="more"><img src="http://i1.sinaimg.cn/blog/08index/blog_mj_007.gif" _fcksavedurl="http://i1.sinaimg.cn/blog/08index/blog_mj_007.gif" id="ArrLeft" alt="向左" onMouseDown_fckprotectedatt="%20onMouseDown%3D%22ISL_GoUp()%22" onMouseUp_fckprotectedatt="%20onMouseUp%3D%22ISL_StopUp()%22" onMouseOut_fckprotectedatt="%20onMouseOut%3D%22ISL_StopUp()%22" ondragstart_fckprotectedatt="%20ondragstart%3D%22return%20false%22" /><span id="dotList"></span><img src="http://i1.sinaimg.cn/blog/08index/blog_mj_007.gif" _fcksavedurl="http://i1.sinaimg.cn/blog/08index/blog_mj_007.gif" id="ArrRight" alt="向右" onMouseDown_fckprotectedatt="%20onMouseDown%3D%22ISL_GoDown()%22" onMouseUp_fckprotectedatt="%20onMouseUp%3D%22ISL_StopDown()%22" onMouseOut_fckprotectedatt="%20onMouseOut%3D%22ISL_StopDown()%22" ondragstart_fckprotectedatt="%20ondragstart%3D%22return%20false%22" /></span><!-- 本行有修改：071228 --> </h2> <div class="blk_04"> <div class="Cont" id="ISL_Cont"> <div class="ScrCont"> <div id="List1"><!-- 这个DIV内的图片大小有修改：071228 --> <!-- 图片列表 begin --> <div class="box"> <a href="http://you.video.sina.com.cn/b/19319174-1575958403.html" _fcksavedurl="http://you.video.sina.com.cn/b/19319174-1575958403.html" target="_blank"><img src="http://i3.sinaimg.cn/blog/http/you.video.sina.com.cn/b/U2682P478T2D58807F69DT20090318090605.jpg" _fcksavedurl="http://i3.sinaimg.cn/blog/http/you.video.sina.com.cn/b/U2682P478T2D58807F69DT20090318090605.jpg" width="89" height="61" alt="尚雯婕讲音乐之路" /></a> <p><a href="http://you.video.sina.com.cn/b/19319174-1575958403.html" _fcksavedurl="http://you.video.sina.com.cn/b/19319174-1575958403.html" target="_blank">尚雯婕讲音乐之路</a></p> </div> <div class="box"> <a href="http://v.sina.com.cn/v/paike.html" _fcksavedurl="http://v.sina.com.cn/v/paike.html" target="_blank"><img src="http://i1.sinaimg.cn/blog/U2698P478T2D58736F69DT20090317123201.jpg" _fcksavedurl="http://i1.sinaimg.cn/blog/U2698P478T2D58736F69DT20090317123201.jpg" width="89" height="61" alt="解剖课上疯狂嬉闹" /></a> <p><a href="http://v.sina.com.cn/v/paike.html" _fcksavedurl="http://v.sina.com.cn/v/paike.html" target="_blank">解剖课上疯狂嬉闹</a></p> </div> <div class="box"> <a href="http://v.sina.com.cn/v/shehui.html" _fcksavedurl="http://v.sina.com.cn/v/shehui.html" target="_blank"><img src="http://i0.sinaimg.cn/blog/U2384P478T2D58711F69DT20090317104114.jpg" _fcksavedurl="http://i0.sinaimg.cn/blog/U2384P478T2D58711F69DT20090317104114.jpg" width="89" height="61" alt="少妇出轨命儿掩护" /></a> <p><a href="http://v.sina.com.cn/v/shehui.html" _fcksavedurl="http://v.sina.com.cn/v/shehui.html" target="_blank">少妇出轨命儿掩护</a></p> </div> <div class="box"> <a href="http://v.sina.com.cn/v/gaoxiao.html" _fcksavedurl="http://v.sina.com.cn/v/gaoxiao.html" target="_blank"><img src="http://i3.sinaimg.cn/blog/U3303P478T2D58679F69DT20090316180027.jpg" _fcksavedurl="http://i3.sinaimg.cn/blog/U3303P478T2D58679F69DT20090316180027.jpg" width="89" height="61" alt="赵本山<不差钱3>" /></a> <p><a href="http://v.sina.com.cn/v/gaoxiao.html" _fcksavedurl="http://v.sina.com.cn/v/gaoxiao.html" target="_blank">赵本山<不差钱3></a></p> </div> <div class="box"> <a href="http://v.sina.com.cn/v/dy/" _fcksavedurl="http://v.sina.com.cn/v/dy/" target="_blank"><img src="http://i1.sinaimg.cn/blog/U2106P478T2D58645F69DT20090316143650.jpg" _fcksavedurl="http://i1.sinaimg.cn/blog/U2106P478T2D58645F69DT20090316143650.jpg" width="89" height="61" alt="潜规则美女的下场" /></a> <p><a href="http://v.sina.com.cn/v/dy/" _fcksavedurl="http://v.sina.com.cn/v/dy/" target="_blank">潜规则美女的下场</a></p> </div> <div class="box"> <a href="http://v.sina.com.cn/v/paike.html" _fcksavedurl="http://v.sina.com.cn/v/paike.html" target="_blank"><img src="http://i1.sinaimg.cn/blog/U2698P478T2D58629F69DT20090316114515.jpg" _fcksavedurl="http://i1.sinaimg.cn/blog/U2698P478T2D58629F69DT20090316114515.jpg" width="89" height="61" alt="实拍海南极品车模" /></a> <p><a href="http://v.sina.com.cn/v/paike.html" _fcksavedurl="http://v.sina.com.cn/v/paike.html" target="_blank">实拍海南极品车模</a></p> </div> </div> <div id="List2"></div> </div> </div> </div><!-- JS内容有修改：071228 --> <script language="javascript" type="text/javascript"> <!--//--><![CDATA[//><!-- //图片滚动列表 mengjia 070927 var Speed = 10; //速度(毫秒) var Space = 15; //每次移动(px) var PageWidth = 240; //翻页宽度 var fill = 0; //整体移位 var MoveLock = false; var MoveTimeObj; var Comp = 0; var AutoPlayObj=null; var ISL_Pages = Math.floor(GetObj("List1").scrollWidth / PageWidth); var ISL_Page = 1; var GotoLock = false; GetObj("List2").innerHTML = GetObj("List1").innerHTML; GetObj('ISL_Cont').scrollLeft = fill>=0?fill:GetObj('List1').scrollWidth - Math.abs(fill); GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} AutoPlay(); ISL_PageList();//点列表 function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} function AutoPlay(){ //自动滚动 clearInterval(AutoPlayObj); AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间 } function ISL_PageList(){ var i,temp=""; for(i = 1;i<=ISL_Pages;i++){ temp += "<img src='/uploads/allimg/100626/092303L41-0.gif' class='" + (ISL_Page==i?"dotON":"dotOFF") + "' onclick='ISL_GotoPage(" + i + ")' alt='" + i + "页' />"; }; GetObj('dotList').innerHTML = temp; } function ISL_GotoPage(num){ if(MoveLock)return; MoveLock = true; GotoLock = true; Comp = (num - 1) * PageWidth - GetObj('ISL_Cont').scrollLeft; ISL_Page = num; ISL_PageList(); clearInterval(AutoPlayObj); CompScr(); AutoPlay(); } function ISL_GoUp(){ //上翻开始 if(MoveLock) return; clearInterval(AutoPlayObj); MoveLock = true; MoveTimeObj = setInterval('ISL_ScrUp();',Speed); } function ISL_StopUp(){ //上翻停止 if(GotoLock){return}; clearInterval(MoveTimeObj); if((GetObj('ISL_Cont').scrollLeft - fill) % PageWidth != 0){ Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); CompScr(); }else{ MoveLock = false; } AutoPlay(); } function ISL_ScrUp(){ //上翻动作 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth} GetObj('ISL_Cont').scrollLeft -= Space ; } function ISL_GoDown(){ //下翻 clearInterval(MoveTimeObj); if(MoveLock) return; clearInterval(AutoPlayObj); MoveLock = true; ISL_ScrDown(); MoveTimeObj = setInterval('ISL_ScrDown()',Speed); } function ISL_StopDown(){ //下翻停止 if(GotoLock){return}; clearInterval(MoveTimeObj); if(GetObj('ISL_Cont').scrollLeft % PageWidth - (fill>=0?fill:fill+1) != 0 ){ Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; CompScr(); }else{ MoveLock = false; } AutoPlay(); } function ISL_ScrDown(){ //下翻动作 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;} GetObj('ISL_Cont').scrollLeft += Space ; } function CompScr(){ if(Comp == 0){ ISL_Page = Math.round((GetObj('ISL_Cont').scrollLeft - fill) / PageWidth) + 1; if(ISL_Page>ISL_Pages){ISL_Page = 1}; ISL_PageList(); MoveLock = false; GotoLock = false; return; } var num; var TempSpeed = Speed,TempSpace = Space; if(Math.abs(Comp)<PageWidth/5){ TempSpace = Math.round(Math.abs(Comp/5)); if(TempSpace<1){TempSpace=1}; } if(Comp < 0){ //上翻 if(Comp < -TempSpace){ Comp += TempSpace; num = TempSpace; }else{ num = -Comp; Comp = 0; } GetObj('ISL_Cont').scrollLeft -= num; setTimeout('CompScr()',TempSpeed); }else{ //下翻 if(Comp > TempSpace){ Comp -= TempSpace; num = TempSpace; }else{ num = Comp; Comp = 0; } GetObj('ISL_Cont').scrollLeft += num; setTimeout('CompScr()',TempSpeed); } } //--><!]]> </script> <!-- 视频video end --> </div> </body> </html> <a href="http://www.update8.com/Effects/" _fcksavedurl="http://www.update8.com/Effects/">技术网-网页特效频道</a> 提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无
