cari

Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan kod menu gelongsor dengan effect_jquery kelewatan

jQuery melaksanakan kod menu gelongsor dengan effect_jquery kelewatan

WBOY
WBOYasal
2016-05-16 15:40:491335semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jQuery kod menu gelongsor dengan kesan kelewatan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu gelongsor berdasarkan jQuery Gerakkan tetikus ke atas item menu, dan latar belakang menu boleh meluncur ke atas Ia mempunyai kesan gelongsor yang lancar dan kesan navigasi yang mempesonakan Berbanding dengan menu tanpa animasi, menu ini adalah benar-benar Cukup baik.

Mari kita lihat tangkapan skrin kesan larian:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/

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>
<title>jQuery实用炫动的导航效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.nav{width:960px;text-align:center;background:#06F;margin:0 auto;position:relative;}
.nav a{width:104px;height:41px;line-height:41px;display:inline-block;margin-right:30px;position:relative;z-index:11111;color:#FFF;}
.nav_bj{background:#F00;width:104px;height:41px;position:absolute;top:0;z-index:111;left:210px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 var xxx,re;
 $(".nav a").mouseover(function(){
  xxx=$(this).position().left;
  $(".nav_bj").animate({left:xxx})
  clearTimeout(re);
  }).mouseout(function(){
   clearTimeout(re);
   re=setTimeout(function(){
    $(".nav_bj").animate({left:210})
   },500);
  })
 })
</script>
</head>
<body>
<div class="nav">
<a href="#">首页</a>
<a href="#">脚本之家</a>
<a href="#">脚本下载</a>
<a href="#">网页特效</a>
<div class="nav_bj"></div>
</div>
</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：Berbilang iklan imej secara bergantian memaparkan kod kesan yang dilaksanakan dalam kemahiran JavaScript_javascriptArtikel seterusnya：Berbilang iklan imej secara bergantian memaparkan kod kesan yang dilaksanakan dalam kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi