<!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>jQuery Turnning</title>
<script type="text/javascript" language="javascript" src="js/jquery.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(http://www.codefans.net/jscss/demoimg/201011/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(http://www.codefans.net/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;">
Turnning
</p>
</div>
</div>
</body>
</html>
分享到：
相关推荐
**jQuery翻页效果插件jBooklet详解** jBooklet是一款基于jQuery的插件，它为网页中的内容提供了逼真的翻书动画效果。这个插件的设计目标是将静态的网页内容转化为互动性强、视觉吸引力大的电子书籍样式，使得用户...
"5种css3+jquery翻页效果（翻书效果）"就是这样一个实例，它结合了CSS3的强大样式功能和jQuery的动态交互优势，为网页添加了极具吸引力的3D翻书效果。下面将详细介绍这一技术及其相关知识点。 首先，CSS3是层叠样式...
**jQuery 翻页效果详解** jQuery，作为JavaScript的一个强大库，极大地简化了网页的交互和动态效果。在网页中实现翻页效果是常见的需求，比如在数据列表、文章列表或者图片展示等场景中，为了提高用户体验，我们...
在本文中，我们将深入探讨如何使用jQuery来实现一个引人注目的时钟翻页效果，类似于HTC时钟的设计。这种效果可以为网页增添动态感和互动性，提高用户体验。 首先，我们需要理解jQuery是一个轻量级的JavaScript库，...
【jQuery上下翻页效果的图片轮显切换特效】 在网页设计中，动态的图片展示能够吸引用户的注意力，提升用户体验。jQuery作为一个轻量级、高性能的JavaScript库，为开发者提供了丰富的功能，包括各种动画效果和事件...
"jQuery立体式数字动态翻页效果"是一种基于JavaScript库jQuery实现的创新技术，它为传统的数据分页提供了视觉上的新颖感受，使得用户在浏览大量数据时能更加舒适和流畅地进行操作。 jQuery是一个轻量级、高性能的...
在本项目中，“康辉国际旅行社--简单实用Jquery杂志翻页效果”是一个网页交互设计实例，它利用了JavaScript库jQuery来实现一种模拟实体杂志翻页的动态效果。这种效果可以使用户在浏览网页内容时获得更生动、更具沉浸...
本资源"jquery图书翻页效果模板"是利用jQuery技术实现的一种模拟真实图书翻页效果的交互式设计。这种效果可以为在线阅读、电子杂志或者产品展示等提供更丰富的用户体验。 首先，jQuery 图书翻页效果的核心在于通过...
jquery单面翻页效果 $("#g1").jFlip(300,300,{background:"green",cornersTop:false}). bind("flip.jflip",function(event,index,total){ $("#l1").html("Image "+(index+1)+" of "+total); });
在本项目中，我们关注的是一个使用jQuery插件Booklet实现的翻页效果演示。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，使得网页开发更加高效。Booklet插件则是jQuery的一个...
总的来说，"jquery html5手机端翻书效果_手指滑动书本翻页效果代码"项目结合了HTML5、CSS3和jQuery的优势，创建了一个富有互动性的手机阅读体验。通过理解这些技术的原理和相互作用，开发者可以进一步定制和优化这个...
《jQuery响应式翻页效果与实现》 在网页设计中，动态、互动的用户体验往往能提升网站的吸引力和用户满意度。jQuery，一个轻量级、高性能的JavaScript库，为实现这种体验提供了强大的工具。本篇文章将深入探讨如何...
《使用jQuery实现网页笔记本翻页效果详解》 在网页设计中，吸引用户的交互元素往往能够提升用户体验，其中，模拟现实世界的翻页效果就是一个常见的手法。本文将深入探讨如何利用jQuery库来实现一种仿真的笔记本翻页...
在这个“左右翻页效果的jquery”项目中，我们重点关注的是如何利用jQuery来实现一种类似于相册的炫酷翻页效果。 首先，我们需要了解jQuery的基本用法。jQuery对象通过$符号创建，它可以用于选择页面上的DOM元素，如...
二、jQuery翻页效果 jQuery电子杂志书的核心在于其独特的翻页效果。通过精心设计的CSS3动画和jQuery事件处理，用户可以点击或拖动页面边缘，模拟真实的纸质杂志翻页动作。这种效果通常由`animate()`函数实现，结合...
TurnJS 是一个基于 jQuery 的库，它为网页提供了一种高度逼真的图书翻页效果，使得数字出版物、杂志或任何需要类似纸质书籍体验的网页内容变得更加生动和互动。这个库利用了现代浏览器的硬件加速功能，使得翻页动画...
这个特效的核心在于利用CSS和JavaScript来创建3D翻页效果。CSS在这里主要负责样式设定，包括书页的形状、颜色、阴影等视觉元素，以及3D变换的设置。通过CSS3的transform属性，我们可以实现元素的旋转、缩放、平移等...
**jQuery和CSS3翻页效果幻灯片插件详解** 在网页设计中，动态效果的引入可以极大地提升用户体验，使得网站或应用更具吸引力。本文将详细介绍一款基于jQuery和CSS3技术实现的翻页效果幻灯片插件。该插件以其独特的...
"jQuery仿书本翻页预览动画特效"就是这样的一个例子，它模拟了真实书本翻页的效果，使得电子杂志、在线图书等Web应用更加生动有趣。这一特效不仅增加了用户的沉浸感，同时也为网站增添了独特的视觉魅力。 jQuery...