jQuery经过图片高亮手风琴特效代码下载
代码结构
1. 引入JS
<script src="js/jquery.min.js"></script>
2. HTML代码
<center><div id="subject" class="home-subjects-v2"><ul> <li> <a> <img src="img/a1.jpg"> <div class="info"> <h3 style="color:#f62368">聚美妆</h3> <p>聚美妆1/2周年庆</p> <p class="price"><strong>1</strong><i>折起</i></p> <p class="more">进入专题抢购 > </p> </div> <s class="line"></s> <i class="mask"></i> </a> </li> <li class="big"> <a> <img src="img/a2.jpg"> <div class="info"> <h3 style="color:#ff578a">Baby购</h3> <p>宝宝该换装了，新品抢购</p> <p class="price"><strong>2.5</strong><i>折起</i></p> <p class="more">进入专题抢购 > </p> </div> <s class="line"></s> <i class="mask"></i> </a> </li> <li> <a> <img src="img/a3.jpg"> <div class="info"> <h3 style="color:#6d3fa7">时装团</h3> <p>时尚春装，清新小潮搭配</p> <p class="price"><strong>1</strong><i>折起</i></p> <p class="more">进入专题抢购 > </p> </div> <s class="line"></s> <i class="mask"></i> </a> </li> <li> <a> <img src="img/a4.jpg"> <div class="info"> <h3 style="color:#d61939">TV购</h3> <p>补血养颜 就这么简单</p> <p class="price"><strong>2.6</strong><i>折起</i></p> <p class="more">进入专题抢购 > </p> </div> <s class="line"></s><i class="mask"></i> </a> </li> <li> <a> <img src="img/a5.jpg"> <div class="info"> <h3 style="color:#6f9400">聚新鲜</h3> <p>最纯正的泰国香米</p> <p class="price"><strong>5</strong><i>折起</i></p> <p class="more">进入专题抢购 > </p> </div> <i class="mask"></i> </a> </li></ul></div></center><script type="text/javascript"> function mouseover(e){ var list = $('#subject li'); var target = $(e.target).parents('li'); list.removeClass('big'); target.addClass('big'); } (function(){ var outer = $('#subject'); outer.find('li').on('mouseover', mouseover); })()</script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"></div>