您的位置：首页 > Web前端 > JavaScript

卷轴js特效代码

2017-04-10 00:00 323 查看

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>卷轴js特效代码</title>
	<meta name="description" content="卷轴js特效代码" />
	<meta name="keywords" content="卷轴js特效代码" />
	<meta name="author" content="js代码" />
	<meta name="Copyright" content="js代码" />
	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
	<div class="content">
	<div class="l-pic-index"></div>
	<div class="r-pic-index"></div>
	<div class="l-bg-index"></div>
	<div class="r-bg-index"></div>
	<div class="main-index">
	<p class="intro-text">
	写你想写的文本
	</p>
	</div>
	</div>
	</body>
	<script>
	$(document).ready(function(){
	//卷轴展开效果
	$(".l-pic-index").animate({'left':'95px','top':'-4px'},1300);
	$(".r-pic-index").animate({'right':'-23px','top':'-5px'},1450);
	$(".l-bg-index").animate({'width':'433px','left':'73px'},1500);
	$(".r-bg-index").animate({'width':'433px','right':'-38px'},1500,function(){
	$(".main-index").fadeIn(800);
	});
	});
	</script>
	</html>

/*css通用样式*/body,ul,li,p,h1,h2,h3,h4,h5{margin:0;padding:0;font-size:100%;}
body{font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif;font-size: 14px;background: #6f0b02;}
button,input,select,textarea{font-family: inherit;font-size: 100%;margin: 0;}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"]{-webkit-appearance: button;cursor: pointer;}
li{list-style: none;}
a{text-decoration:none;color:#000;background: transparent;}
a:focus{outline: none;}
img{border:0;}
.fl{float: left;}
.fr{float: right;}
.center{width: 1000px;margin: 0 auto 0;}
/*content*/.content{position: relative;margin: auto auto;width: 900px;height: 460px;margin-top: 50px;}
.l-pic-index{/*display:none;*/position: absolute;left: 400px;top: 1px;z-index:2;width:50px;height:460px;background: url("../images/j1.png") no-repeat right 0;}
.r-pic-index{/*display:none;*/position: absolute;right: 400px;top: 0;z-index: 2;width:50px;*width:82px;height:460px;background: url("../images/j4.png") no-repeat left 0;}
.l-bg-index{position: absolute;top: -3px;left: 430px;z-index: 1;width: 25px;height: 459px;background: url("../images/j2.png") right 0 no-repeat;}
.r-bg-index{position: absolute;top:-4px;right: 430px;z-index: 1;width: 25px;height: 459px;background: url("../images/j3.png") 0 0 no-repeat;}
.main-index{display: none;overflow: hidden;zoom:1;position: absolute;z-index: 5;width:530px;height:280px;left:145px;top:90px;color: #2e2e2e;}
.intro-text{margin: 10px 0 0 44px;line-height: 1.8;text-indent: 30px;}

js套用的是jquery-1.10.2.js

img/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 卷轴炫酷 js

相关文章推荐

新的分享

章节导航