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词法作用域与调用对象深入理解
Nov 29 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
php懒人函数 自动添加数据
2011/06/28 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
8个PHP数组面试题
2015/06/23 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python基础教程之匿名函数lambda
2017/01/17 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
pygame实现打字游戏
2021/02/19 Python
python和php哪个容易学
2020/06/19 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
中专毕业自我鉴定
2013/10/16 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
小学生学习感言
2014/03/10 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
个人年底工作总结
2015/03/10 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
2015年暑期见闻
2015/07/14 职场文书
导游词之桂林
2019/08/20 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL