欢迎来到六久阁织梦模板网!
您的位置: 主页 > 网页特效 > 焦点图 >

jquery鼠标滑过上下切换

六久阁织梦模板网焦点图 浏览:0

jquery鼠标滑过上下切换代码调用如下: div class="mid w1073"h2 class="mid w1000"产品服务/h2div class="pdList" ul class="mid w1000"li div class="tmplS tmplS1"div class="cover"/divdiv class="wrapS" p class="ttl"高性能云主机 p安全 便捷 付费灵活

jquery鼠标滑过上下切换

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>&nbsp;&nbsp;<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
    还没有评论,快来抢沙发吧!