Rumah > hujung hadapan web > tutorial js > jQuery melaksanakan kesan gerakan mendatar dengan penimbalan mendatar (dengan muat turun kod sumber demo)_jquery

jQuery melaksanakan kesan gerakan mendatar dengan penimbalan mendatar (dengan muat turun kod sumber demo)_jquery

WBOY
Lepaskan: 2016-05-16 15:17:00
asal
1346 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan jQuery bagi kesan gerakan mendatar dengan penimbalan mendatar. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

JQuery digunakan di sini untuk menjana gerakan mendatar penimbal mendatar, yang boleh diaktifkan dengan mengklik tetikus Selepas mengklik, anda boleh melihat bahawa lapisan Div bergerak secara mendatar, yang mana banyak bentuk kesan animasi lain boleh diperolehi.

Klik di sini untuk melihat tunjuk cara dalam talian .

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>水平移动</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 src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("#panel").click(function(){
    $(this).animate({left: "500px"}, 3000);
  })
})
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

Salin selepas log masuk

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas di tapak ini: "Ringkasan animasi jQuery dan penggunaan kesan khas" dan "Ringkasan klasik biasa kesan khas jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan