基于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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
简单的分页代码js实现
May 17 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python中文编码那些事
2014/06/25 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python实现归并排序算法
2018/11/22 Python
python实现名片管理系统
2018/11/29 Python
python生成带有表格的图片实例
2019/02/03 Python
Python GUI编程完整示例
2019/04/04 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
python opencv实现图像配准与比较
2021/02/09 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Java的五个基础面试题
2016/02/26 面试题
课改先进个人汇报材料
2014/01/26 职场文书
大学军训感言1000字
2014/02/25 职场文书
学校运动会报道稿
2014/09/23 职场文书
2014会计年终工作总结
2014/12/20 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS