js小技巧5 js控制图片滚动效果

本文介绍了一个使用CSS和JavaScript实现的图片滑动展示效果。通过鼠标悬停在左侧导航菜单的不同选项上,右侧展示区会平滑滚动到对应图片的位置。此效果利用了HTML元素的scrollLeft属性,并采用正弦函数来实现平滑过渡。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 <!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>
<p>查找更多代码,请访问:<a href=" http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值