文档章节

卷轴js特效代码

小小茜
 小小茜
发布于 2017/04/10 10:12
字数 398
阅读 19
收藏 0
  <!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/

© 著作权归作者所有

共有 人打赏支持
上一篇: web前端面试
下一篇: web前端面试
小小茜
粉丝 0
博文 2
码字总数 1186
作品 0
西安
程序员
私信 提问
推荐10款超棒的前端特效

推荐10款免费的前端特效给大家,可以直接获取代码插入使用! 使用CSS和javascript实现的指针式手表效果 指针式手表效果,无论是计时还是时间,都是网站非常好的选择! GBdebug在线调试地址:...

gbin1
2013/08/21
150
0
js文本框点击时文字消失,失去焦点_已迁移

方法一,直接在input中直接 方法二, 方法三,利用jquery实现 来源:::http://www.111cn.net/wy/js-ajax/47180.htm

辣条拌鱼翅
2015/01/01
0
0
JavaScript浏览器地址栏特效之无敌风火轮特效

这篇文章和大家分享一个 javascript 在浏览器地址栏上的特效,非常的有趣。它可以使页面上所有的图片元素一个个得排列起来并不停的转圈。因为转圈弧度为半圆且棱角分明,我们姑且称之为风火轮...

脚本编程网站
2013/04/26
0
1
js弹出 一个输入框获取 ,然后用户输入个名字 活动名字,加到另外一个新连接上,传到后台

js弹出框获取用户输入 活动名字 , 有没有什么适合我这种后台java工程师的懒人的js 代码展示库呀, 以前我经常在上面,copy上的js特效,直接拿来用

天池番薯
2014/08/06
289
2
jQuery特效---菜单伸缩展开收起效果

jQuery特效---菜单伸缩展开收起效果 演示地址:http://www.iiwnet.com/js_menu/998.html 演示图片: 更多:JS特效 核心代码如下 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitiona......

西西爱OS
2012/10/17
0
1

没有更多内容

加载失败,请刷新页面

加载更多

nginx rails 详细站点配置入门教程

Ruby on Rails 是一个用于开发数据库驱动的网络应用程序的完整框架。Rails基于MVC(模型- 视图- 控制器)设计模式。从视图中的Ajax应用,到控制器中的访问请求和反馈,到封装数据库的模型,R...

xiangyunyan
48分钟前
3
0
Shiro

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

嘿嘿嘿IT
52分钟前
1
0
Flutter 之 Dart语言基础详解 上篇

经过了一个星期的React Native的学习和了解,感觉还是Flutter的优势会更高一些,而且从学习成本来说感觉做安卓的同学学习flutter会相对低一点,门槛会低很多。 当然dart的基础笔者还是从其他...

林-师傅等等我
今天
5
0
Java NIO问题总结

问题1:IO事件在被处理之前,selector.select()方法依然能够返回该事件。即如果在一个线程A中进行selector.select(),而将selector.selectedKeys()中的SelectionKey交由业务线程池去处理,则...

月下狼
今天
5
0
ehcache

简单介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速、精干等特点,是Hibernate中默认的CacheProvider。Ehcache是一种广泛使用的开 源Java分布式缓存。主要面向通用缓存,Java EE和轻量...

大笨象会跳舞吧
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部