图片连续不间断滚动像册 时间:2020-05-11 人气:0 <!--Quirks Mode--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>Fifty Studio│图片连续不间断滚动像册</title> <link rel="stylesheet" type="text/css" href="/tutorialshttps://img.qb5200.com/download-x/demo/css/main.css" /> <!--[if IE]><style> @import url("/tutorialshttps://img.qb5200.com/download-x/demo/css/ie.css"); </style><![endif]--> <style type="text/css"> <!-- /*--CSS Code by Forestgan http://www.forest53.com--*/ a{background:#EEE; color:#333;} a:hover{background:#EEE;color: #666;} #demo ul{list-style:none;} #FGWrapper{width: 640px; margin:2em auto; background:#EEE;} #FGLeft{float: left;padding: 10px;} #FGThumb{float: right;padding: 10px 10px 10px 0;background:#EEE;} #demo{overflow:hidden; width: 130px;height: 360px; background:#eee;} #demo img {border: 0;margin-bottom: 10px;vertical-align: middle;} #FGFooter{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:right;} span#FGdesc2{float: left;} --> </style> <script type="text/javascript"> function showPic (whichpic) { if (document.getElementById) { document.getElementById('FGplaceholder').src = whichpic.href; if (whichpic.title) {document.getElementById('FGdesc2').childNodes[0].nodeValue = whichpic.title; } else {document.getElementById('FGdesc2').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; } return false; } else { return true; } } </script> <noscript> <style type="text/css"> #demo{overflow:auto; } } </style> </noscript> </head> <body> <div> <div> <a href="/"><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/26231.gif" width="170" height="40" alt="Fifty Studio" class="logo" /></a> <h1>CSS 布局演示 CSS Layout by Forestgan</h1> <h2 id="demo_date">2006-10-30 发表</h2> </div> <div> <div> <div><img onerror="javascript:this.src='/skin1/img/error.jpg';" width="480" height="360" src="https://img.qb5200.com/download-x/20200511/26232.jpg" alt="" id="FGplaceholder" /> </div> <div> <div> <div> <ul> <li><a href="https://m.qb5200.com/upload/bigimg/holiday102801.jpg" onclick="return showPic(this);" title="My Photo 1"><img onerror="javascript:this.src='/skin1/img/error.jpg';" width="130" height="80" src="https://img.qb5200.com/download-x/20200511/26233.jpg" alt="" /></a> </li> <li><a href="https://m.qb5200.com/upload/bigimg/holiday102802.jpg" onclick="return showPic(this);" title="My Photo 2"><img onerror="javascript:this.src='/skin1/img/error.jpg';" width="130" height="80" src="https://img.qb5200.com/download-x/20200511/26234.jpg" alt="" /></a> </li> <li><a href="https://m.qb5200.com/upload/bigimg/holiday102806.jpg" onclick="return showPic(this);" title="My Photo 3"><img onerror="javascript:this.src='/skin1/img/error.jpg';" width="130" height="80" src="https://img.qb5200.com/download-x/20200511/26235.jpg" alt="" /></a> </li> <li><a href="https://m.qb5200.com/upload/bigimg/holiday102809.jpg" onclick="return showPic(this);" title="My Photo 4"><img onerror="javascript:this.src='/skin1/img/error.jpg';" width="130" height="80" src="https://img.qb5200.com/download-x/20200511/26236.jpg" alt="" /></a> </li> <li><a href="https://m.qb5200.com/upload/bigimg/holiday102810.jpg" onclick="return showPic(this);" title="My Photo 5"><img onerror="javascript:this.src='/skin1/img/error.jpg';" width="130" height="80" src="https://img.qb5200.com/download-x/20200511/26237.jpg" alt="" /></a> </li> </ul> </div> <div> </div> </div> <script type="text/javascript"> //图片无间断滚动代码，兼容IE、Firefox、Opera //原脚本是IE only，来自网上，作者未知 //部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器于2006-10-30重写 //http://www.forest53.com var speed=30; var FGDemo=document.getElementById('demo'); var FGDemo1=document.getElementById('demo1'); var FGDemo2=document.getElementById('demo2'); FGDemo2.innerHTML=FGDemo1.innerHTML function Marquee1(){ if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0) FGDemo.scrollTop-=FGDemo1.offsetHeight else{ FGDemo.scrollTop++ } } var MyMar1=setInterval(Marquee1,speed) FGDemo.onmouseover=function() {clearInterval(MyMar1)} FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)} </script> </div> <div><span id="FGdesc2">My Photo 1</span><a href="http://www.forest53.com">Design by Forestgan</a></div> </div> </div> </div> <div> <address> 演示页面设计制作： <a href="http://www.forest53.com">Forestgan</a> 采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途 <a href="javascript:history.back()">返回前一页</a> </address> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-152060-1"; urchinTracker(); </script> <noscript> <p>google-analytics</p> </noscript> <script src="/js/copyrightdemo.js" type="text/javascript"></script> <noscript><p>my stat</p></noscript> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 加载全部内容