jquery實現簡單的輪換出現效果實例

2024-05-06 16:23:38

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jquery實現簡單的輪換出現效果,涉及jquery針對圖片樣式切換效果的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery實現簡單的輪換出現效果。分享給大家供大家參考。具體如下：

<!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>