Rumah > Artikel > hujung hadapan web > jQuery mengawal lapisan DIV untuk mencapai perubahan animasi dari besar ke kecil, dari jauh ke dekat

jQuery mengawal lapisan DIV untuk mencapai perubahan animasi dari besar ke kecil, dari jauh ke dekat

PHP中文网asal: 2016-05-16 15:37:091496semak imbas

Contoh dalam artikel ini menerangkan cara jQuery mengawal lapisan DIV untuk mencapai perubahan animasi dari besar ke kecil, dari jauh ke dekat. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah contoh kecil jQuery yang mengawal kesan animasi DIV daripada besar ke kecil, dari jauh ke dekat, dan menggunakan jquery untuk menjana kesan animasi saya harap anda menyukainya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus 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>Panel控制Div运动，由大到小变化。</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(function(){
 $("#panel").css("opacity", "0.5");//设置不透明度
 $("#panel").click(function(){
  $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
   .animate({top: "200px" , width :"200px"}, 3000 ,function(){
    $(this).css("border","5px solid blue");
  })
 });
 });
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

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：Perbincangan mendalam tentang kemahiran pengaturcaraan_javascript berfungsi javascriptArtikel seterusnya：Perbincangan mendalam tentang kemahiran pengaturcaraan_javascript berfungsi javascript

Artikel berkaitan

Lihat lagi