编程 Javascript

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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS类库Bindows1.3中的内存释放方式分析

Mar 08 Javascript

juqery 学习之三选择器可见性元素属性

Nov 25 Javascript

javascript中的startWith和endWith的几种实现方法

May 07 Javascript

JS调用CS里的带参方法实例

Aug 01 Javascript

javascript去除字符串中所有标点符号和提取纯文本的正则

Jun 07 Javascript

JavaScript返回网页中超链接数量的方法

Apr 03 Javascript

js实现简洁大方的二级下拉菜单效果代码

Sep 01 Javascript

JS实现的论坛Ajax打分效果完整实例

Oct 31 Javascript

jQuery实现动态文字搜索功能

Jan 05 Javascript

数组Array的排序sort方法

Feb 17 Javascript

jQuery Jsonp跨域模拟搜索引擎

Jun 17 jQuery

js禁止浏览器页面后退功能的实例(推荐)

Sep 01 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