jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果實(shí)例
更新時(shí)間：2015年07月23日 15:40:48 作者：李榮飛
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果,涉及jquery針對(duì)圖片樣式切換效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果。分享給大家供大家參考。具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").toggle(function(){
$("#div2").animate({left:"300px"},500);
$("#div1").animate({left:"0px"},500);
$("#div2").animate({left:"-300px"},10);
},function(){
$("#div1").animate({left:"300px"},500);
$("#div2").animate({left:"0px"},500);
$("#div1").animate({left:"-300px"},10);
})
})
</script>
<style type="text/css">
#outer{
position:relative;
width:600px;
height:200px;
overflow:hidden;
background-color:#999;
}
#div1{
position:absolute;
width:300px;
height:200px;
top:0px;
left:-300px;
}
#div2{
position:absolute;
width:300px;
height:200px;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="outer">
<div id="div1">
<img src="img/范筱梵-1024x768.jpg" width="300" height="200" />
</div>
<div id="div2">
<img src="img/美女高清壁紙【第二期】 (2).jpg" width="300" height="200" />
</div>
</div>
<input type="button" value="開始" id="btn1"/>
</body>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
用jquery統(tǒng)計(jì)子菜單的條數(shù)示例代碼
統(tǒng)計(jì)子菜單條數(shù)的方法有很多，在本文為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
基于Jquery的回車成tab焦點(diǎn)切換效果代碼(Enter To Tab )
基于Jquery的回車成tab焦點(diǎn)切換效果代碼(Enter To Tab )，需要的朋友可以參考下。2010-11-11
使用jQuery實(shí)現(xiàn)星級(jí)評(píng)分代碼分享
本文給大家分享的是一段使用jQuery制作的星級(jí)評(píng)分的代碼，非常大氣漂亮，功能也很實(shí)用，這里推薦個(gè)大家。2014-12-12
jQuery EasyUI API 中文文檔 - Menu菜單
jQuery EasyUI API 中文文檔 - Menu菜單,學(xué)習(xí)jQuery EasyUI的朋友可以參考下。2011-10-10
基于jQuery實(shí)現(xiàn)表格數(shù)據(jù)的動(dòng)態(tài)添加與統(tǒng)計(jì)的代碼
使用jQuery可以大大減輕工作量,在實(shí)際開發(fā)中,使用了jQuery的clone(true)函數(shù),該函數(shù)可以創(chuàng)建一個(gè)jQury對(duì)象的副本,并且參數(shù)為true時(shí),可以復(fù)制該元素的所有事件處理函數(shù)。2011-01-01
使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
children()是jQuery中的內(nèi)置方法,用于查找與所選元素相關(guān)的所有子元素,?jQuery中的children()方法向下遍歷到所選元素的單個(gè)級(jí)別并返回所有元素,我們還可以在children()的參數(shù)中添加過(guò)濾器、使用children()來(lái)定位特定的子元素以及使用each()方法來(lái)迭代子元素等2023-11-11
jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加與刪除相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-08-08
分享一個(gè)自己動(dòng)手寫的jQuery分頁(yè)插件
本文主要是將自己動(dòng)手些jquery分頁(yè)插件的思路和步驟分享給大家，本分頁(yè)插件功能很簡(jiǎn)單，但是卻很實(shí)用，不想其他插件似的，功能一大堆。好了，廢話不多說(shuō)，還是看正文吧2014-08-08
jquery獲取當(dāng)前點(diǎn)擊的元素的五種方法介紹
我們可以使用$(this)方法獲取事件處理函數(shù)內(nèi)部的當(dāng)前元素,也可以使用e.target方法在外部獲取當(dāng)前元素,此外,我們還介紹了parent()方法和find()方法獲取當(dāng)前元素的父元素或子元素,以及closest()方法獲取當(dāng)前元素最近的祖先元素2023-08-08