Rumah > Artikel > hujung hadapan web > jquery melaksanakan kesan putaran mudah example_jquery

jquery melaksanakan kesan putaran mudah example_jquery

WBOYasal: 2016-05-16 15:49:231301semak imbas

Contoh dalam artikel ini menerangkan kesan putaran mudah yang dicapai oleh jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan carian mudah dan menggantikan dalam kemahiran javascript_javascriptArtikel seterusnya：Bagaimana untuk melaksanakan carian mudah dan menggantikan dalam kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi