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程序设计有所帮助。
相关推荐
-
通过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插件iScroll实现下拉刷新,滚动翻页特效
JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <
-
封装的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
-
使用jQueryMobile实现滑动翻页效果的方法
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢
-
使用jQuery.fn自定义jQuery翻页插件
第一次写jQuery插件.自己感觉写的也不怎么样.写jQuery插件利用的就是这个东东 jQuery.fn,例如 复制代码 代码如下: jQuery.fn.pluginName=function(){}; 这个是我写的分页插件的样子 插件通过一个外放的函数来进行翻页操作,无论是点击前进.后退.还是改变页面大小,都会调用该函数. 先看看插件的代码结构 复制代码 代码如下: (function ($) { //存放插件所需的属性字段 var PagerFields = { }; //插件的私有函数
-
jquery带翻页动画的电子杂志代码分享
这是一款基于jquery实现的带翻页动画的电子杂志,小编有时就在想我们读的纸质课本可不可以都改成电子书,这要是不是会更节省资源呐? 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真.今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果.书本的内容支持任意HTML元素,相当灵活. 运行效果图 --------------------------------查
-
Jquery:ajax实现翻页无刷新功能代码
不多说,直接贴代码: 下面是js部分: 复制代码 代码如下: var pageSize = "10";//每页行数 var currentPage = "1";//当前页 var totalPage = "0";//总页数 var rowCount = "0";//总条数 var params="";//参数 var url="activity_list.action";//action
-
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
-
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实现按键盘方向键翻页特效
1.jQuery代码: 复制代码 代码如下: $(document).ready(function(){ var prevpage=$("#pre").attr("href"); var nextpage=$("#next").attr("href"); $("body").keydown(function(event){ if(event.keyCode==37 &am
-
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({}
随机推荐
- AngularJS全局scope与Isolate scope通信用法示例
- ASP.net全局程序文件Global.asax用法分析
- IOS LaunchScreen设置启动图片与启动页停留时间详解
- 浅谈互斥锁为什么还要和条件变量配合使用
- ASP.NET2.0缓存(Cache)技术深入理解
- JavaScript进阶教程(第三课第二部分)第1/2页
- 在JavaScript的正则表达式中使用exec()方法
- php正则匹配文章中的远程图片地址并下载图片至本地
- 15种ASP技巧
- 微信公众号支付H5调用支付解析
- javascript抖动元素的小例子
- ajax中文乱码问题解决方案
- 点此处秒后立即下载
- Spring Boot CLI安装教程
- C++多文件变量解析
- 深入ORACLE迁移到MYSQL的总结分析
- jquery提取元素里的纯文本不包含span等里的内容
- jQuery检测滚动条是否到达底部
- java实现的连接oracle/mysql数据库功能简单示例【附oracle+mysql数据库驱动包】
- 详解CentOS 6.5如何安装Realtek无线网卡驱动