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


Posted in Javascript onFebruary 16, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery之网页换肤实现代码
Apr 30 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
js实现弹幕墙效果
Dec 10 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 #Javascript
js实现下拉框选择要显示图片的方法
Feb 16 #Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 #Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 #Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 #Javascript
JavaScript简介
Feb 15 #Javascript
JavaScript的原型继承详解
Feb 15 #Javascript
You might like
php中的实现trim函数代码
2007/03/19 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
四风问题自我剖析材料
2014/10/07 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers