外国网站iveshare，图片随鼠标滑动的效果是怎么实现的

悬赏园豆：60 [已关闭问题] 关闭于 2011-07-29 21:09

liveshare ，链接http://www.liveshare.com/#&tab=public，感觉很炫，不知道具体由哪几个JS代码实现的

Web前端 HTML5

若若納风 | 初学一级 | 园豆：200
提问于：2011-07-23 18:50

< >

所有回答(2)

要动感的？？不用动感的CSS A也可以做。。

用CSS 3也可以。动感的话，Mootools,JQ都可以，要不自己写个JS Element运动的函数

看看这个，

<style type="text/css">
.list_pic li {
    width:215px;
    height:200px;
    float:left;
    position:relative;
    list-style:none;
    margin:5px;
}
.list_pic li span {
    position:absolute;
    top:125px;
    font-size:13px;
    text-align:center;
}
.pic_1, .pic_2, .pic_3 {
    position:absolute;
    width:130px;
    height:100px;
    top:10px;
    border:2px solid #CCC;
    z-index:10;
}
.pic_1 {
    left:-20px;
}
.pic_2 {
    left:20px;
}
.pic_3 {
    top:0;
    left:0;
    height:120px;
}
.list_pic li a:hover img {
    z-index:100;
    border-color:red;
}
.list_pic li a:hover .pic_1 {
    left:-130px;
}
.list_pic li a:hover .pic_2 {
    left:130px;
}
.list_pic li a:hover .pic_3 {
    width:160px;
    height:160px;
}
.list_pic li a:hover span {
    font-size:25px;
    top:165px;
}
</style>
<ul class="list_pic">
  <li>
      <a href="javascript:void(1)"> 
          <img src="1.jpg" class="pic_1" /> 
          <img src="2.jpg" class="pic_2" /> 
          <img src="3.jpg" class="pic_3" /> 
          <span>Title Info</span> 
     </a> 
 </li>
  <li>
      <a href="javascript:void(1)"> 
          <img src="1.jpg" class="pic_1" /> 
          <img src="2.jpg" class="pic_2" /> 
          <img src="3.jpg" class="pic_3" /> 
          <span>Title Info 2</span> 
     </a> 
 </li>
  <li>
      <a href="javascript:void(1)"> 
          <img src="1.jpg" class="pic_1" /> 
          <img src="2.jpg" class="pic_2" /> 
          <img src="3.jpg" class="pic_3" /> 
          <span>Title Info 3</span> 
     </a> 
 </li>
</ul>