jquery melaksanakan kod untuk kawasan navigasi yang terbentang ke kanan di top

jquery melaksanakan kod untuk kawasan navigasi yang terbentang ke kanan di top_jquery

WBOY

Lepaskan： 2016-05-16 15:40:51

asal

1145 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan jquery kod kawasan navigasi yang menarik balik bahagian atas ke kanan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah menu yang serupa dengan navigasi, tetapi ia lebih berskala. Ia bukan sahaja boleh digunakan sebagai menu, tetapi juga sebagai kesan blok navigasi Blok navigasi boleh mengandungi menu atau fungsi lain jQuery. , klik anak panah di hujung kiri lapisan terapung dengan tetikus untuk runtuh dan mengembangkan menu ini.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-right-hidden-show-nav-style-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>鼠标单击控制收缩和展开的窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
#box{position:absolute;right:0;top:0;overflow:hidden;}
#arrow{color:#fff;background:#000;width:20px;height:90px;line-height:90px;font-size:12px;font-family:"宋体";text-align:center;font-weight:bold;float:left;}
#col_box{width:400px;height:90px;background:#eee;float:left;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var oMoveBox = $("#col_box"), oArr = $("#arrow"), maxL = 400;
 oArr.click(function(){
  oMoveBox.animate({"width":"-="+maxL},600,function(){
   maxL = -maxL;
   $("#arrow").html(maxL<0 &#63; "<" : ">");
  })
 });
});
</script>
</head>
<body>
<div id="box">
 <div id="arrow">></div>
 <div id="col_box">z<br>z<br>s<br>k<br>y</div>
</div>
</body>
</html>

Salin selepas log masuk

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