<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>基于jQuery實現(xiàn)的點擊圖片翻頁展示效果</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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery動態(tài)背景圖片效果實現(xiàn)方法
這篇文章主要介紹了jQuery動態(tài)背景圖片效果實現(xiàn)方法,涉及javascript隨機數(shù)及動態(tài)設(shè)置css樣式的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
2015-07-07
jquery html5 視頻播放控制代碼
這篇文章主要介紹了jquery html5 視頻播放控制代碼,需要的朋友可以參考下
2016-11-11
jquery實現(xiàn)select選擇框內(nèi)容左右移動代碼分享
這篇文章主要介紹了jquery實現(xiàn)select選擇框內(nèi)容左右移動代碼，感興趣的小伙伴們可以參考一下
2015-11-11
jquery 圖片上一張下一張鏈接效果（續(xù)篇）
很久沒寫文章了，這段時間一直在做類似鮮果的一個應(yīng)用和數(shù)據(jù)采集，還有就是對企業(yè)和個人成長的思考。
2010-04-04
jQuery選擇器中含有空格的使用示例及注意事項
選擇器中的空格是不容忽視的，多一個空格或少一個空格也許得到的結(jié)果會截然不同的，下面以一個示例為大家詳細介紹下到底有什么不同，感興趣的朋友額可以參考下
2013-08-08
jQuery中jqGrid分頁實現(xiàn)代碼
今天看到j(luò)avaeye上有人使用了jqGrid實現(xiàn)了數(shù)據(jù)的分頁，參考它的代碼，實現(xiàn)了這個功能，搬出來曬曬，作為自己以后學(xué)習(xí)的資料
2011-11-11
jQuery代碼性能優(yōu)化的10種方法
之前，我們減少字節(jié)數(shù)和請求次數(shù)以及加載順序以使頁面加載的更快。如今，我們越來越多的注意到另一個影響網(wǎng)站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架，使節(jié)點選擇和DOM操作變得越來越容易，如果使用不當(dāng)，有可能影響整個網(wǎng)頁的響應(yīng)速度。
2016-06-06
基于JQuery的模擬蘋果桌面Dock效果(穩(wěn)定版)
之所以將它命名為穩(wěn)定版，是因為之前已經(jīng)分享了一個初級版本的，之前的初級版中存在很多bug?，F(xiàn)在經(jīng)過反復(fù)琢磨、實驗，修復(fù)了之前版本存在的很多不足之處，就算鼠標(biāo)快速的滑動依然表現(xiàn)的很穩(wěn)定
2012-10-10
jquery select多選框的左右移動具體實現(xiàn)代碼
這篇文章介紹了jquery實現(xiàn)select多選框的左右移動的方法，有需要的朋友可以參考一下
2013-07-07
基于jQuery下拉選擇框插件支持單選多選功能代碼
這篇文章主要介紹了基于jQuery下拉選擇框插件支持單選多選功能代碼的相關(guān)資料,需要的朋友可以參考下
2016-06-06