jQuery实现点击图片翻页展示效果的方法

本文实例讲述了jQuery实现点击图片翻页展示效果的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>基于jQuery实现的点击图片翻页展示效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.div{width:240px;height:90px;z-index:0;position:absolute;left:10px;border:2px #3300FF solid;border:0px;color:#FFFFFF;margin-left:320px;}
</style>
<script type="text/javascript" src="/images/jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
 var z=-1;
 $("div").click(function(){
  $(this).animate({left:"350px"},1000,function(){$(this).css("zIndex",z--)}).animate({left:"10px"},1000);
 })
});
</script>
</head>
<body>若不能显示效果，则刷新页面可正常。
<div class="div"><img src="images/m01.jpg"></div>
<div class="div"><img src="images/m02.jpg"></div>
<div class="div"><img src="images/m03.jpg"></div>
<div class="div"><img src="images/m04.jpg"></div>
</body>
</html>

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

赞 (0)

相关推荐

  • Jquery：ajax实现翻页无刷新功能代码

    不多说,直接贴代码: 下面是js部分: 复制代码 代码如下: var pageSize = "10";//每页行数 var currentPage = "1";//当前页 var totalPage = "0";//总页数 var rowCount = "0";//总条数 var params="";//参数 var url="activity_list.action";//action

  • 通过pjax实现无刷新翻页(兼容新版jquery)

    pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html 目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com 等网站已经使用. pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术. 同时支持了缓存和本地存储,下次访问的时候直接读取本地

  • 封装的jquery翻页滚动(示例代码)

    HTML结构: 复制代码 代码如下: ul._rollSe{width:100px;height:300px;over-flow:hidden}  ul._rollSe li._rollPar{height:100px;border:1px solid #369} 复制代码 代码如下: <div class="_rollParent">  <ul class="_rollPageSe">  <li class="_rollpa

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

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

    本文实例讲述了jquery实现的点击翻书效果代码.分享给大家供大家参考,具体如下: 这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现,还正在完善中,希望大家能喜欢,我觉得不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-cha-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  • 使用jQuery.fn自定义jQuery翻页插件

    使用jQuery.fn自定义jQuery翻页插件

    第一次写jQuery插件.自己感觉写的也不怎么样.写jQuery插件利用的就是这个东东 jQuery.fn,例如 复制代码 代码如下: jQuery.fn.pluginName=function(){}; 这个是我写的分页插件的样子 插件通过一个外放的函数来进行翻页操作,无论是点击前进.后退.还是改变页面大小,都会调用该函数. 先看看插件的代码结构 复制代码 代码如下: (function ($) { //存放插件所需的属性字段 var PagerFields = { }; //插件的私有函数

  • jquery带翻页动画的电子杂志代码分享

    jquery带翻页动画的电子杂志代码分享

    这是一款基于jquery实现的带翻页动画的电子杂志,小编有时就在想我们读的纸质课本可不可以都改成电子书,这要是不是会更节省资源呐? 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真.今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果.书本的内容支持任意HTML元素,相当灵活. 运行效果图                         --------------------------------查

  • jquery实现键盘左右翻页特效

    jquery键盘左右翻页,jquery键盘方向键翻页功能,当无上一篇或者下一篇的时候,按键盘将会没什么反应,避免错误跳转. HTML代码 <p>上一篇:<a id='pre' href='http://www.daimajiayuan.com/sitejs-17294-1.html'>一款随滚动条下滑左右渐入的页面布局</a> </p> <p>下一篇:<a id='next' href='http://www.daimajiayuan.co

  • 使用jQueryMobile实现滑动翻页效果的方法

    使用jQueryMobile实现滑动翻页效果的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢

  • jquery实现图片翻页效果

    复制代码 代码如下: $(function($){ $.fn.changeList = function(options){ var defaults = { tag : 'li', // tab name subName : '.utilTabSub', // sub class name eventType : 'click', // event type num : 4, showType : 'show' // show effect type }, opts = $.extend({}

  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • jQuery实现按键盘方向键翻页特效

    1.jQuery代码: 复制代码 代码如下: $(document).ready(function(){     var prevpage=$("#pre").attr("href");     var nextpage=$("#next").attr("href");     $("body").keydown(function(event){       if(event.keyCode==37 &am

随机推荐