基于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中String和StringBuffer的速度之争
Apr 01 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
javascript中Object使用详解
Jan 26 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
深入理解node.js http模块
Jan 24 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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中最容易忘记的一些知识点总结
2013/04/28 PHP
sina的lightbox效果。
2007/01/09 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
Python3爬楼梯算法示例
2019/03/04 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
python手写均值滤波
2020/02/19 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
大学生学习自我评价
2014/01/13 职场文书
体育教学随笔感言
2014/02/24 职场文书
购房协议书范本
2014/04/11 职场文书
说明书格式及范文
2014/05/07 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
师范生求职信
2014/06/14 职场文书
校园文化标语
2014/06/18 职场文书
党员十八大心得体会
2014/09/12 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
2014年稽查工作总结
2014/12/20 职场文书
Python实现简单的猜单词
2021/06/15 Python
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript