金山云首页jquery鼠标悬停时上下滑动切换效果

时间：2014-02-27 11:53 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gb2312">
<title>金山云jquery鼠标滑过上下切换</title>
<style>
html{background: #fff;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box}
body{font-family: Verdana,Arial,Helvetica,'Microsoft YaHei',sans-serif}
html,body,.Bdy{height: 100%}
.mid{margin: 0 auto}
.w1000{width: 1000px}
.w1073{width: 1074px}
.pdList{padding-bottom: 14px;background: url(http://www.codefans.net/jscss/demoimg/201402/063.png) center bottom no-repeat}
.pdList li{display: inline-block;*display: inline;*zoom: 1;margin-right: 7px}
} .pdList li: last-child{margin-right: 0}
.tmplS{position: relative;height: 156px;overflow: hidden}
.tmplS a: hover{text-decoration: none}
.cover{position: absolute;z-index: 40;width: 240px;height: 154px;border: 1px solid transparent;margin-bottom: -154px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.tmplS1 .cover{background: url(http://www.codefans.net/jscss/demoimg/201402/155.png) #37c4ee 0 0 no-repeat;border-color: #2cb8e9}
.tmplS2 .cover{background: url(http://www.codefans.net/jscss/demoimg/201402/155.png) #ff8843 -240px 0 no-repeat;border-color: #f67b3a}
.tmplS3 .cover{background: url(http://www.codefans.net/jscss/demoimg/201402/155.png) #90da88 -480px 0 no-repeat;border-color: #8ecf84}
.tmplS4 .cover{background: url(http://www.codefans.net/jscss/demoimg/201402/155.png) #77b1d2 -720px 0 no-repeat;border-color: #5b9cbe}
.wrapS{position: relative;width: 240px;*width: 200px;height: 154px;padding: 30px 20px;background: url(/jscss/demoimg/201402/085.png) #50697d;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.tmplS1 .wrapS{background: url(http://www.codefans.net/jscss/demoimg/201402/155.png) 0 -156px no-repeat;border: 1px solid #b1d2e3;color: #13aad6}
.tmplS1 .wrapS: hover,.tmplS2 .wrapS: hover{cursor: pointer}
.tmplS2 .wrapS{background: url(/jscss/demoimg/201402/155.png) -240px -156px no-repeat;border: 1px solid #e4d0ad;color: #fa7f23}
.tmplS3 .wrapS{background: url(/jscss/demoimg/201402/155.png) -480px -156px no-repeat;border: 1px solid #cedbcd;color: #52ac4c}
.tmplS4 .wrapS{background: url(/jscss/demoimg/201402/155.png) -720px -156px no-repeat;border: 1px solid #c2cdd5;color: #5298bb}
.wrapS p{font-size: 16px;line-height: 30px}
.wrapS .ttl{font-size: 26px}
.wrapC{position: relative;left: -20px;top: -30px;width: 240px;height: 154px;display: block}
.tmplS5 .wrapC{background: url(http://www.codefans.net/jscss/demoimg/201402/155.png) no-repeat 0px -309px}
.tmplS5 .wrapS{background: #8fdeba;background: -moz-linear-gradient(top,#8fdeba 5%,#7bc19e 94%);background: -webkit-gradient(linear,left top,left bottom,color-stop(5%,#8fdeba),color-stop(94%,#7bc19e));background: -webkit-linear-gradient(top,#8fdeba 5%,#7bc19e 94%);background: -o-linear-gradient(top,#8fdeba 5%,#7bc19e 94%);background: -ms-linear-gradient(top,#8fdeba 5%,#7bc19e 94%);background: linear-gradient(to bottom,#8fdeba 5%,#7bc19e 94%);filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8fdeba',endColorstr='#7bc19e',GradientType=0 )}
.tmplS6 .wrapC{background: url(http://www.codefans.net/jscss/demoimg/201402/155.png) no-repeat -240px -309px}
.tmplS6 .wrapS{background: #8eaff6;background: -moz-linear-gradient(top,#8eaff6 0%,#7298e5 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#8eaff6),color-stop(100%,#7298e5));background: -webkit-linear-gradient(top,#8eaff6 0%,#7298e5 100%);background: -o-linear-gradient(top,#8eaff6 0%,#7298e5 100%);background: -ms-linear-gradient(top,#8eaff6 0%,#7298e5 100%);background: linear-gradient(to bottom,#8eaff6 0%,#7298e5 100%);filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8eaff6',endColorstr='#7298e5',GradientType=0 )}
.tmplS7 .wrapC{background: url(http://www.codefans.net/jscss/demoimg/201402/138.png) no-repeat -480px -309px}
.tmplS7 .wrapS{background: #ce93ef;background: -moz-linear-gradient(top,#ce93ef 5%,#c491e1 94%);background: -webkit-gradient(linear,left top,left bottom,color-stop(5%,#ce93ef),color-stop(94%,#c491e1));background: -webkit-linear-gradient(top,#ce93ef 5%,#c491e1 94%);background: -o-linear-gradient(top,#ce93ef 5%,#c491e1 94%);background: -ms-linear-gradient(top,#ce93ef 5%,#c491e1 94%);background: linear-gradient(to bottom,#ce93ef 5%,#c491e1 94%);filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ce93ef',endColorstr='#c491e1',GradientType=0 )}
.tmplS8 .wrapC{background: url(http://www.codefans.net/jscss/demoimg/201402/138.png) no-repeat -720px -309px}
.tmplS8 .wrapS{background: #f5968e;background: -moz-linear-gradient(top,#f5968e 0%,#dc7c73 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5968e),color-stop(100%,#dc7c73));background: -webkit-linear-gradient(top,#f5968e 0%,#dc7c73 100%);background: -o-linear-gradient(top,#f5968e 0%,#dc7c73 100%);background: -ms-linear-gradient(top,#f5968e 0%,#dc7c73 100%);background: linear-gradient(to bottom,#f5968e 0%,#dc7c73 100%);filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5968e',endColorstr='#dc7c73',GradientType=0 )}
.wrapS .opt{position: absolute;right: 28px;bottom: 20px}
.wrapS .opt .nlink{color: #0c96f2;text-decoration: none}
.tmplS1 .btn3{background: #3ab0de}
.tmplS1 .btn3: hover,.tmplS1 .btn3: active{background: #31a5d3}
.tmplS2 .btn3{background: #fc8732}
.tmplS2 .btn3: hover,.tmplS2 .btn3: active{background: #e87827}
.tmplS3 .btn3{background: #64c55c}
.tmplS3 .btn3: hover,.tmplS3 .btn3: active{background: #58b550}
.tmplS4 .btn3{background: #3ab0de}
.tmplS4 .btn3: hover,.tmplS4 .btn3: active{background: #30a5d3}
h2{font-size: 18px;color: #333;line-height: 32px}
h2 span{display: inline-block;border-bottom: 3px solid #39728e}
.w1073 h2{line-height: 100%;padding: 10px 0 15px}
</style>
</head>
<body>
<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="/" class="nlink">免费试用</a>  <a href="/" 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="/" class="btn btn3">立即购买</a>
		</div>
	  </div>
		  <li>
	  <div class="tmplS tmplS3">
		<div class="cover"></div>
		<a href="/" 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="/" 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="http://www.codefans.net/ajaxjs/jquery-1.9.1.min.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">
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。