您的位置：首页 > Web前端 > JQuery

鼠标滑过列表图片放大，带列表序列号自动生成效果

2016-10-14 15:09 537 查看

请转载此文的朋友务必附带原文链接，谢谢。原文链接：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/images/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/images/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/images/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/images/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/images/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/images/123_u4776.png" alt=""/>
</div>
</a>
</li>
</ul>
</div>

css代码如下：

.hot-exchange ul li.active .range{
width: 20px;
height: 60px;
background: url(../images/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();
})
})

})

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 鼠标 jquery 滑过

相关文章推荐

新的分享

章节导航