jquery鼠标滑过上下切换代码调用如下:
<div class="mid w1073"> <h2 class="mid w1000">产品服务</h2> <div class="pdList"> <ul class="mid w1000"> <li> <div class="tmplS tmplS1"> <div class="cover"></div> <div class="wrapS"> <p class="ttl">高性能云主机 <p>安全 便捷 付费灵活 <p class="opt"><a href="http://www.lol9.cn/" class="nlink">免费试用</a> <a href="http://www.lol9.cn/" class="btn btn3">立即购买</a> </div> </div> <li> <div class="tmplS tmplS2"> <div class="cover"></div> <div class="wrapS"> <p class="ttl">标准存储服务 <p>无限制 多备份 低成本 <p class="opt"><a href="http://www.lol9.cn/" class="btn btn3">立即购买</a> </div> </div> <li> <div class="tmplS tmplS3"> <div class="cover"></div> <a href="http://www.lol9.cn/" target="_blank"> <div class="wrapS"> <p class="ttl">金山快盘个人版 <p>多终端自动同步 <p class="opt"><button class="btn btn3">立即使用</button> </div> </a> </div> <li> <div class="tmplS tmplS4"> <div class="cover"></div> <a href="http://www.lol9.cn/" target="_blank"> <div class="wrapS"> <p class="ttl">金山快盘商业版 <p>轻松办公,同步成长 <p class="opt"><button class="btn btn3">立即使用</button> </div> </a> </div> </ul> </div> <h2 class="mid w1000">即将发布</h2> <div class="pdList"> <ul class="mid w1000"> <li> <div class="tmplS tmplS5"> <div class="wrapS"><div class="wrapC"></div></div> </div> <li> <div class="tmplS tmplS6"> <div class="wrapS"><div class="wrapC"></div></div> </div> <li> <div class="tmplS tmplS7"> <div class="wrapS"><div class="wrapC"></div></div> </div> <li> <div class="tmplS tmplS8"> <div class="wrapS"><div class="wrapC"></div></div> </div> </ul> </div> </div> </div> <script src="js/jquery.1.10.2.js"></script> <script> $(document).ready(function(){ $('.tmplS').hover(function(){ $(".cover", this).stop().animate({top:'156px', left:'0px'},{queue:false,duration:400}) }, function() { $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:400}) }) }) </script> <div style="text-align:center;clear:both"> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源:<a href="http://www.lol9.cn/" target="_blank">六久阁</a></p> </div>
jQuery标签TAB控制图片切换代码
« 上一篇
2017年09月29日
flash轮换焦点图代码
下一篇 »
2017年06月24日
有问题在这里提问,阁主会为你解决!
- 全部评论(0)
还没有评论,快来抢沙发吧!