经验分享程序开发文档资料数据资源其它资源

jquery元素跳动效果js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery元素跳动效果js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery元素跳动效果js代码

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jqueryԪ������Ч��</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/parallaximus.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.parallaximus.min.js"></script>
</head>
<body class="sales-page">
<div class="l-canvas">
	<div class="l-canvas-h">
		<div class="l-canvas-top">
			<div class="w-parallaximus i-autoinit height_fixed width_fixed" onclick="return {perspective: 100}">
				<div class="w-parallaximus-layer index_1">
					<img src="images/ll.png" width="82" height="67" alt="">
				</div>
				<div class="w-parallaximus-layer index_2">
					<img src="images/im.png" width="98" height="67" alt="">
				</div>
				<div class="w-parallaximus-layer index_3">
					<img src="images/ra.png" width="100" height="67" alt="">
				</div>
				<div class="w-parallaximus-layer index_4">
					<img src="images/ax.png" width="110" height="67" alt="">
				</div>
				<div class="w-parallaximus-layer index_5">
					<img src="images/pa.png" width="100" height="67" alt="">
				</div>
				<div class="w-parallaximus-layer index_6">
					<img src="images/us.png" width="92" height="67" alt="">
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

CSS代码(style.css):

body{font-family:Trebuchet ms,Tahoma,sans-serif;color:#37424d;background:#83a1bf;/* Old browsers */
background:-moz-linear-gradient(left,#6b8fb2 0%,#99b2cc 50%,#6b8fb2 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,right top,color-stop(0%,#6b8fb2),color-stop(50%,#99b2cc),color-stop(100%,#6b8fb2));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(left,#6b8fb2 0%,#99b2cc 50%,#6b8fb2 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(left,#6b8fb2 0%,#99b2cc 50%,#6b8fb2 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(left,#6b8fb2 0%,#99b2cc 50%,#6b8fb2 100%);/* IE10+ */
background:linear-gradient(to right,#6b8fb2 0%,#99b2cc 50%,#6b8fb2 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b8fb2',endColorstr='#6b8fb2',GradientType=1 );/* IE6-9 */
}
::selection{background:#4e697d;color:#fff;}
::-moz-selection{background:#4e697d;color:#fff;}
a{color:#2f6b99;border-bottom:1px solid #5d8eb4;text-decoration:none;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;}
a:link,a:visited{color:#2f6b99;}
a:hover,a:active,a:focus{color:black;border-color:#444;}
/* typography */
h1,h2,h3,h4{font-family:Trebuchet ms,Tahoma,sans-serif;font-weight:200;}
h1{margin:0 0 15px;color:#324150;font-size:36px;line-height:44px;}
h2{margin:0 0 30px;padding:10px 0 4px;color:#324150;font-size:30px;line-height:38px;text-shadow:0 2px 0 rgba(255,255,255,0.2)}
h3{margin:0 0 10px;color:#fff;font-size:22px;line-height:28px;text-shadow:0 2px 0 rgba(0,0,0,0.25)}
h4{margin:0 0 15px;color:#405367;font-size:17px;line-height:26px;}
p{margin:0 0 15px;font-size:15px;line-height:24px;}
ul{margin:0 0 25px;padding:0 0 0 35px;}
ol{margin:0 0 25px;padding:0 0 0 35px;}
li{padding:0;margin:0 0 5px;font-size:14px;line-height:20px;}
.l-canvas-top{overflow:hidden;/*max-width:1000px;*/
margin:0 auto;}
.l-canvas-middle{margin:0 auto;width:800px;padding:0 0 60px;}
.sales-page .w-parallaximus{height:400px;width:100%;max-width:1400px;/*min-width:800px;*/
margin:0 auto;overflow:hidden;}
.sales-page .w-parallaximus-layer.index_1{height:450px;width:1100px;}
.sales-page .w-parallaximus-layer.index_1 > img{left:468px;top:180px;}
.sales-page .w-parallaximus-layer.index_2{height:500px;width:1200px;}
.sales-page .w-parallaximus-layer.index_2 > img{left:710px;top:205px;}
.sales-page .w-parallaximus-layer.index_3{height:550px;width:1300px;}
.sales-page .w-parallaximus-layer.index_3 > img{left:468px;top:230px;}
.sales-page .w-parallaximus-layer.index_4{height:600px;width:1400px;}
.sales-page .w-parallaximus-layer.index_4 > img{left:700px;top:255px;}
.sales-page .w-parallaximus-layer.index_5{height:650px;width:1500px;}
.sales-page .w-parallaximus-layer.index_5 > img{left:468px;top:280px;}
.sales-page .w-parallaximus-layer.index_6{height:700px;width:1600px;}
.sales-page .w-parallaximus-layer.index_6 > img{left:1008px;top:305px;}
.l-examples{font-size:0;margin:0 0 20px;padding:0;}
.l-example{display:inline-block;width:48.5%;margin-right:3%;margin-bottom:3%;vertical-align:top;font-size:22px;line-height:22px;*display:inline;}
.l-example a{display:block;background:rgba(255,255,255,0.2);box-shadow:0 1px 0 rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.25) inset;border-radius:5px;padding:20px 30px 15px;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.25);text-decoration:none;}
.l-example a:hover{background:rgba(255,255,255,0.5);}
.l-example a > span{font-size:13px;}
.l-example:nth-child(2n){margin-right:0;}
.l-tabs{font-size:0;}
.l-tab{display:inline-block;width:30%;margin-right:5%;margin-bottom:20px;vertical-align:top;*display:inline;}
.l-tab:hover{color:#000;}
.l-tab:nth-child(3n){margin-right:0;}
.l-order{text-align:center;padding:30px 0;background:rgba(255,255,255,0.2);box-shadow:0 1px 0 rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.25) inset;border-radius:5px;margin-top:30px;}
.l-order-btn,.l-order-link{display:inline-block;padding:15px 40px;border:none;*display:inline;}
.l-order-link{text-decoration:underline;font-size:18px;}
.l-order-link:hover{text-decoration:none;}
.l-order-btn{text-decoration:none;background:#ffbf00;font-size:24px;color:#333 !important;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.3),0 1px 1px rgba(255,255,255,0.6) inset;}
.l-order-btn:hover{background:#fc3;color:#000 !important;}
.l-order-btn:active{background:#fc3;color:#000 !important;box-shadow:0 1px 3px rgba(0,0,0,0.4) inset;}
.nav{font-size:0;text-align:center;margin:0 auto 30px;}
.nav-link{display:inline-block;position:relative;font-size:16px;padding:7px 10px;border:none;margin-right:10px;border-radius:2px;*display:inline;}
.nav-link.active{color:#000;text-decoration:none;cursor:default;background:rgba(255,255,255,0.3);}
.nav-link span{display:block;position:absolute;top:80%;opacity:0;left:50%;margin-left:-50px;width:80px;z-index:5000;background:#333;padding:7px 10px;color:#fff;font-size:12px;border-radius:2px;-webkit-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}
.nav-link span::after{display:block;content:"";position:absolute;top:-3px;left:50%;margin-left:-5px;width:10px;height:10px;background:#333;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.nav-link:hover span{opacity:1;top:100%;}
.nav-link.active span{display:none !important;}
.l-cols{margin-left:-20px;*zoom:1;}
.l-cols:before,.l-cols:after{display:table;content:"";}
.l-cols:after{clear:both;}
.l-col{float:left;margin-left:20px;}
.l-col.at_right{float:right;}
.l-col.at_right > h2,.l-col.at_right > p{text-align:right;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
51.78 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
51.78 KB
立即下载
陈琦妍
了解
打赏作者 鼓励作者
jquery特效1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章