基于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中Math对象使用说明
Jan 16 Javascript
javascript removeChild 使用注意事项
Apr 11 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
在Vue中使用mockjs代码实例
Nov 25 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
JS 网站性能优化笔记
2011/05/24 PHP
php实现递归的三种基本方式
2020/07/04 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
js版本A*寻路算法
2006/12/22 Javascript
JavaScript入门学习书籍推荐
2008/06/12 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
python中引用与复制用法实例分析
2015/06/04 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
python reverse反转部分数组的实例
2018/12/13 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
.NET现在共支持多少种语言
2014/02/26 面试题
Linux内核产生并发的原因
2016/11/08 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
幼儿园门卫岗位职责
2014/02/14 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
趣味运动会加油词
2015/07/18 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技