图片连续不间断滚动像册_javascript技巧-jsチュートリアル-php.cn

CSS 布局演示 CSS Layout by Forestgan

2006-10-30 发表

ホームページ

ウェブフロントエンド

jsチュートリアル

图片连续不间断滚动像册_javascript技巧

May 16, 2016 pm 07:20 PM

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Fifty Studio│图片连续不间断滚动像册</title> 
<link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css"> 
 
<style type="text/css"> 
 
</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> 
 
 
<div id="ForestganWrap"> 
  <div id="forestganHeader"> <a href="/"><img class="logo lazy" src="/static/imghw/default1.png" data-src="/img/logo.gif"    style="max-width:90%"  style="max-width:90%" alt="Fifty Studio"></a> 
    <h1 id="CSS-布局演示-CSS-Layout-by-Forestgan">CSS 布局演示 CSS Layout by Forestgan</h1> 
    <h2 id="发表">2006-10-30 发表</h2> 
  </div> 
  <div id="forestganMiddle"> <div id="FGWrapper"> 
<div id="FGLeft">
<img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/bigimg/holiday102801.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="" id="FGplaceholder"> </div> 
<div id="FGThumb"> 
<div id="demo"> 
<div id="demo1"> 
<ul> 
    <li>
<a href="/upload/bigimg/holiday102801.jpg" onclick="return showPic(this);" title="My Photo 1"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/thumb/holiday102801s.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt=""></a> </li> 
    <li>
<a href="/upload/bigimg/holiday102802.jpg" onclick="return showPic(this);" title="My Photo 2"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/thumb/holiday102802s.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt=""></a> </li> 
    <li>
<a href="/upload/bigimg/holiday102806.jpg" onclick="return showPic(this);" title="My Photo 3"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/thumb/holiday102806s.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt=""></a> </li> 
    <li>
<a href="/upload/bigimg/holiday102809.jpg" onclick="return showPic(this);" title="My Photo 4"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/thumb/holiday102809s.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt=""></a> </li> 
    <li>
<a href="/upload/bigimg/holiday102810.jpg" onclick="return showPic(this);" title="My Photo 5"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/thumb/holiday102810s.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt=""></a> </li> 
</ul> 
</div> 
<div id="demo2"> </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 id="FGFooter">
<span id="FGdesc2">My Photo 1</span><a href="http://www.forest53.com">Design by Forestgan</a>
</div> 
</div> </div> 
</div> 
<div id="forestganFooter"> 
  <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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。