cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery melaksanakan kod untuk kawasan navigasi yang terbentang ke kanan di top_jquery

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

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

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>

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：Melaksanakan kod kesan penukaran gaya ringkas berdasarkan kemahiran JS_javascriptArtikel seterusnya：Melaksanakan kod kesan penukaran gaya ringkas berdasarkan kemahiran JS_javascript

Artikel berkaitan

Lihat lagi