请转载此文的朋友务必附带原文链接,谢谢。
原文链接:http://xuyran.blog.51cto.com/11641754/1861924
这里我只把关键代码给贴出来。
html:
<div class="hot-exchange">
<ul>
<li class="active clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/p_w_picpaths/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/p_w_picpaths/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/p_w_picpaths/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/p_w_picpaths/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/p_w_picpaths/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/p_w_picpaths/123_u4776.png" alt=""/>
</div>
</a>
</li>
</ul>
</div>
css代码如下:
.hot-exchange ul li.active .range{
width: 20px;
height: 60px;
background: url(../p_w_picpaths/u4779.png) no-repeat;
}
.range p{
display: none
}
.hot-exchange ul li.active .range p{
display: block;
}
.hot-exchange ul li.active .goods-img{
width: 67px;
height: 67px;
}
jquery代码如下:
$(function(){
//兑换专区左侧鼠标滑动效果
var serialNumber = 0;
var serialNumberLen = 6;
$(".hot-exchange ul li").each(function(){
serialNumber++;
if(serialNumber > serialNumberLen){
return false;
}
$(this).children().find(".range").append('0'+serialNumber);
$(this).mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
$(this).children().find(".range p").show();
$(this).siblings().children().find(".range p").hide();
})
})
})
效果如下: