当前位置：首页 > 网页特效 > 滚动代码 >

JS控制图片滚动的效果

时间：2012-08-18 19:54 来源：未知作者：后浪收藏推荐

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css+js控制图片展示</title>
<style>
body{
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  margin: 0px;
  font: 70% verdana, geneva, arial, helvetica, sans-serif;
  color: #000;
  padding-top: 0px;
  text-align: center
  }
#outer{
  padding-right: 0px;
  padding-left: 0px;
  background: url(/images/bg-outer.gif) repeat-y center top;
  padding-bottom: 0px;
  margin: 0px auto;
  width: 780px;
  padding-top: 0px;
  text-align: left
  }
#wrapper{
  background: #fff;
  margin: 0px 4px
  }
#content{
  padding-right: 0px;
  padding-left: 0px;
  min-height: 400px;
  padding-bottom: 20px;
  margin: 20px 30px;
  padding-top: 0px;
  position: relative
  }
#focus{
  border-right: #ccc 2px solid;
  padding-right: 0px;
  border-top: #ccc 2px solid;
  padding-left: 0px;
  min-height: 188px;
  background: url(/images/tile.gif) #eee repeat-y left top;
  padding-bottom: 10px;
  margin: 25px 0px 30px;
  border-left: #ccc 2px solid;
  width: 100%;
  padding-top: 15px;
  border-bottom: #ccc 2px solid;
  position: relative;
  height: 188px
  }
#beni{
  padding-right: 0px;
  padding-left: 0px;
  left: 0px;
  padding-bottom: 0px;
  margin: 0px;
  width: 250px;
  padding-top: 0px;
  list-style-type: none;
  position: absolute;
  top: 15px
  }
#beni li{
  border-top: #fff 1px solid;
  font-size: 12px;
  float: left;
  width: 250px;
  text-indent: 24px;
  line-height: 26px
  }
#beni li.first{
  border-top: 0px
  }
#beni li a{
  border-right: 0px;
  padding-right: 0px;
  border-top: 0px;
  display: block;
  padding-left: 0px;
  font-weight: bold;
  background: #eee;
  padding-bottom: 0px;
  margin: 0px;
  border-left: 0px;
  padding-top: 0px;
  border-bottom: 0px;
  text-decoration: none
  }
#beni li a:hover{
  background: #f9f9f9
  }
#description{
  width:420px;
  height:188px;
  overflow:hidden;
  float:right;
  margin-right:15px;
  }
</STYLE>
<script>
window.onload=function(){
  var ele=document.getElementById("description");
  var w=ele.clientWidth;
  var n=20,t=20;
  var timers=new Array(n);
  var c=document.getElementById("beni").getElementsByTagName("li");
  for(var i=0;i<c.length;i++){
    c[i].index=i;
    c[i].onmouseover=doSlide;
  }
  c=null;
  function doSlide(){
    var x=ele.scrollLeft;
    var d=this.index*w-x;
    if(!d) return;
    for(var i=0;i<n;i++)(function(){
      if(timers[i])
        clearTimeout(timers[i]);
      var j=i;
      timers[i]=setTimeout(function(){
        ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));
      },(i+1)*t);
    })();
  }
}
</script>
</head>
<body id=home>
<div id=outer>
  <div id=wrapper>
    <div id=content>
      <div id=focus>
        <ul id=beni>
          <li class=first><a href="#">opere e oggetti d'arte</a></li>
          <li><a href="#">architettzure</a></li>
          <li><a href="#">reperti archeologici</a></li>
          <li><a href="#">stampe e matrici di incisione</a></li>
          <li><a href="#">fotografie</a></li>
          <li><a href="#">beni etnoantropologici</a></li>
        </ul>
        <div id=description>
          <img src="http://www.lanrentuku.com/down/js/images/12447871590.jpg" />
        </div>
      </div>
    </div>
  </div>
</div>

网页特效

JS控制图片滚动的效果

滚动代码下载排行

最新文章