基于JS实现翻书效果的页面切换样式


Posted in Javascript onFebruary 16, 2017

本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
  <title></title>
  <script type="text/javascript" language="javascript" src="https://3water.com/ajaxjs/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" language="javascript">
  $(function() {
  $("#right").click(function() {
  var roll = $("<div></div>", { css: { position: "absolute", border: "solid 1px #999", left:  "806px", top: "10px", height: "494px", width: "1px", background:           "#fff"}}).appendTo($("#book").parent());
  $(roll).animate({
  left: "10px",
  width: "398px"
  }, 1000, function() {
  $("#left").css({"background":"#fff"});
  $(roll).fadeOut(300, function() {
  $(roll).remove();
  })
  });
  });
  });
  </script>
  </head>
  <body style="padding:5px;margin:0;">
  <div id="book" style="width:797px;height:494px;background:#ccc;border:solid 6px #ccc;">
  <div id="left" style="width:398px;height:494px;float:left;background:url(https://3water.com/jscss/demoimg/201011/PLh.png) no-repeat top left;cursor:pointer;"></div>
  <div id="right" style="width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;"><p style="margin-top:470px;font-size:12px;color:#999;">点这翻页 </p></div>
  </div>
  </body>
  </html>

以上所述是小编给大家介绍的基于JS实现翻书效果的页面切换样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js密码强度校验
Nov 10 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
js实现3d悬浮效果
Feb 16 #Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 #Javascript
js实现截图保存图片功能的代码示例
Feb 16 #Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 #Javascript
原生JS实现图片翻书效果
Feb 16 #Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 #Javascript
js+html制作简单验证码
Feb 16 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python 绘制国旗的示例
2020/09/27 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
2014年计生标语
2014/06/23 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2015年维修工作总结
2015/04/25 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL