jquery实现的点击翻书效果代码


Posted in Javascript onNovember 04, 2015

本文实例讲述了jquery实现的点击翻书效果代码。分享给大家供大家参考,具体如下:

这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现,还正在完善中,希望大家能喜欢,我觉得不错。

运行效果截图如下:

jquery实现的点击翻书效果代码

在线演示地址如下:

具体代码如下:

<!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>自写一个翻书的Js效果</title>
<script type="text/javascript" language="javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript">
  $(function() {
   $("#right").click(function() {
   var roll = $("<div/>", { css: { position: "absolute", border: "solid 1px #999", left: "806px", top: "10px", height: "494px", width: "1px", background: "#fff url(images/eCX.png) repeat-y -200px 0px"} }).appendTo($("#book").parent());
    $(roll).animate({
     left: "10px",
     width: "398px",
     "background-position": "272px 0px"
    }, 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(images/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>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
javascript实现计算器功能
Mar 30 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 #Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 #Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 #Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 #Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 #Javascript
js实现二级菜单渐隐显示
Nov 03 #Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
You might like
德劲1103二次变频版的打磨
2021/03/02 无线电
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Pytorch中.new()的作用详解
2020/02/18 Python
Python递归函数特点及原理解析
2020/03/04 Python
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
班主任师德师风自我剖析材料
2014/10/02 职场文书
蜗居观后感
2015/06/11 职场文书