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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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(//ku.shouce.ren/files/images/201601/56a368db0659f.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(//ku.shouce.ren/files/images/201601/56a368dd10f54.png) #37c4ee 0 0 no-repeat;border-color: #2cb8e9}
.tmplS2 .cover{background: url(//ku.shouce.ren/files/images/201601/56a368dd10f54.png) #ff8843 -240px 0 no-repeat;border-color: #f67b3a}
.tmplS3 .cover{background: url(//ku.shouce.ren/files/images/201601/56a368dd10f54.png) #90da88 -480px 0 no-repeat;border-color: #8ecf84}
.tmplS4 .cover{background: url(//ku.shouce.ren/files/images/201601/56a368dd10f54.png) #77b1d2 -720px 0 no-repeat;border-color: #5b9cbe}
.wrapS{position: relative;width: 240px;*width: 200px;height: 154px;padding: 30px 20px;background: url(//ku.shouce.ren/files/images/201601/56a368df43da2.png) #50697d;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.tmplS1 .wrapS{background: url(//ku.shouce.ren/files/images/201601/56a368dd10f54.png) 0 -156px no-repeat;border: 1px solid #b1d2e3;color: #13aad6}
.tmplS1 .wrapS: hover,.tmplS2 .wrapS: hover{cursor: pointer}
.tmplS2 .wrapS{background: url(//ku.shouce.ren/files/images/201601/56a368dd10f54.png) -240px -156px no-repeat;border: 1px solid #e4d0ad;color: #fa7f23}
.tmplS3 .wrapS{background: url(//ku.shouce.ren/files/images/201601/56a368dd10f54.png) -480px -156px no-repeat;border: 1px solid #cedbcd;color: #52ac4c}
.tmplS4 .wrapS{background: url(//ku.shouce.ren/files/images/201601/56a368dd10f54.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(//ku.shouce.ren/files/images/201601/56a368dd10f54.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(//ku.shouce.ren/files/images/201601/56a368dd10f54.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(//ku.shouce.ren/files/images/201601/56a368e163cca.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(//ku.shouce.ren/files/images/201601/56a368e163cca.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>&nbsp;&nbsp;<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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

jQuery实例

描述

金山云jquery鼠标滑过上下切换，当鼠标移在某个方块上，会滑出相关内容。这是我花了好大会给大家整理出来的滑动特效，把一些无关的CSS代码都删除了，剩下的基本都有用处，不过懂得朋友，还可以再优化。所使用有两张背景图片来修饰效果，...