masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > JQuery melaksanakan menu tatal kiri dan kanan effects_jquery

JQuery melaksanakan menu tatal kiri dan kanan effects_jquery

WBOY
Lepaskan： 2016-05-16 15:37:42
asal
1333 orang telah melayarinya

Selepas setengah hari, fungsi menu tatal kiri dan kanan yang dibangunkan menggunakan JQuery telah selesai, dan tiada ralat ditemui lagi. Sekarang keluarkan kod lengkap dan kongsikannya!

boleh ditatal.js

JQuery menu tatal kiri dan kanan serpihan rujukan kod skrip kesan khas: 

scrollable = function(content, render, options, beforeScroll) { 
 /* 
  * @author: selfimpr 
  * @blog: http://blog.csdn.net/lgg201 
  * @e-mail: lgg860911@yahoo.com.cn 
  * 
  * 注意: 
  *  1. content必须自己指定宽度. 如果其中的元素使用块元素, 请使用float: left向左浮动. 
  *  2. 使用时, 尽量自定义样式, 由于本人水平欠佳, 不能作出更加通用的东西, 呵呵. 
  * 
  * 参数解释 
  * content: 内容元素, 可以是选择器或JQUERY封装的DOM元素 
  * render: 渲染到的目标容器, 可以是选择器或JQUERY封装的DOM元素 
  * options: 选项 
  *  scrollable_class: 整体scrollable的外框架样式 , 默认: ui-scrollable 
  *  scrollable_left_class: 左按钮的样式, 默认: ui-scrollable-left 
  *  scrollable_container_class: 内容容器的样式, 默认: ui-scrollable-container 
  *  scrollable_right_class: 右按钮的样式, 默认: ui-scrollable-right 
  *  delay: 鼠标放上或点击按钮时两次移动之间的时间间隔, 整数 
  *  speed: 鼠标放上按钮时, 一次移动的距离, 整数 
  *  speedup: 鼠标点下按钮时, 一次移动的距离, 整数 
  *  resizeEvent: 是否监听窗口改变大小的事件, 布尔值, 
  *   监听窗口改变大小时, 在刷新页面后, 感觉显示有点别扭, 所以默认了false 
  * beforeScroll: 内容滚动时候的事件回调方法. 
  *  接受参数(两个对象): 第一个是滚动前内容左右位置, 第二个是滚动后内容左右位置. 
  *  注意: 该事件可以使内容不受边界限制的滚动. 
  */ 
 options.scrollable_class = options.scrollable_class || 'ui-scrollable'; 
 options.scrollable_left_class = options.scrollable_left_class || 'ui-scrollable-left'; 
 options.scrollable_container_class = options.scrollable_container_class || 'ui-scrollable-container'; 
 options.scrollable_right_class = options.scrollable_right_class || 'ui-scrollable-right'; 
 options.leftText = options.leftText || ''; 
 options.rightText = options.rightText || ''; 
 options.delay = options.delay || 20; 
 options.speed = options.speed || 5; 
 options.speedup = options.speedup || 10; 
 options.resizeEvent = options.resizeEvent || false; 
  
 var render = (typeof render == 'string' ? $(render) : render); 
 var content = (typeof content == 'string' ? $(content) : content); 
 var scrollable = $('<div></div>') 
     .attr('id', 'scrollable_' + content.attr('id')) 
     .attr('className', options.scrollable_class); 
  
 var left = $('<div></div>') 
    .attr('id', 'scrollable_left_' + content.attr('id')) 
    .attr('className', options.scrollable_left_class); 
 left.text(options.leftText); 
  
 var container = $('<div></div>') 
     .attr('id', 'scrollable_container_' + content.attr('id')) 
     .attr('className', options.scrollable_container_class); 
  
 content.css('line-height', '29px') 
   .css('position', 'relative') 
   .css('left', '0px') 
   .css('overflow', 'hidden') 
   .css('float', 'left'); 
  
 var right = $('<div></div>') 
    .attr('id', 'scrollable_right_' + content.attr('id')) 
    .attr('className', options.scrollable_right_class); 
 right.text(options.rightText); 
  
 show = function() { 
  scrollable.appendTo(render); 
  container.appendTo(scrollable); 
  left.css('display', ''); 
  right.css('display', ''); 
  content.appendTo(container); 
  left.prependTo(scrollable); 
  right.appendTo(scrollable); 
  if(content.width() <= container.width() + 20) { 
   scrollable.remove('.' + options.scrollable_left_class); 
   scrollable.remove('.' + options.scrollable_right_class); 
   left.css('display', 'none'); 
   right.css('display', 'none'); 
   container.width(content.width()); 
   scrollable.width(container.width()); 
  } 
  container.position = {left: container.css('left').substr(0, -2)} 
  container.position.right = container.position.left + container.width(); 
  content.position = {left: new Number(content.css('left').substr(0, -2))} 
  content.position.right = content.position.left + content.width(); 
 }; 
  
 show(); 
  
 var originalBroswerWidth = document.body.clientWidth; 
 window.onresize = function() { 
  if(options.resizeEvent) { 
   var newBroswerWidth = document.body.clientWidth; 
   var percent = newBroswerWidth / originalBroswerWidth; 
   container.width(container.width() * percent); 
   scrollable.width(container.width() + left.width() + right.width()); 
   show(); 
  } 
  originalBroswerWidth = document.body.clientWidth; 
 } 
  
 var scroll = false; 
 move = function(distance) { 
  var newLeft = content.position.left + distance; 
  var newRight = content.position.right + distance; 
  if(distance > 0 && newLeft > container.position.left) { 
   distance = container.position.left - content.position.left; 
   scroll = false; 
  } else if(distance < 0 && newRight < container.position.right) { 
   distance = content.position.right - container.position.right; 
   scroll = false; 
  } 
  newLeft = content.position.left + distance; 
  newRight = content.position.right + distance; 
  scorll = beforeScroll &#63; beforeScroll( 
    {left: content.position.left, right: content.position.right}, 
    {left: newLeft, right: newRight}) : scroll; 
  if(scroll) { 
   content.css('left', newLeft + 'px'); 
   content.position.left += distance; 
   content.position.right += distance; 
   setTimeout('move(' + distance + ')', options.delay); 
  } 
 } 
 left.mouseover(function() { 
  scroll = true; 
  move(options.speed); 
 }); 
 right.mouseover(function() { 
  scroll = true; 
  move(-options.speed); 
 }); 
 left.mouseout(function() { 
  scroll = false; 
 }); 
 right.mouseout(function() { 
  scroll = false; 
 }); 
 left.mousedown(function() { 
  scroll = true; 
  move(options.speedup); 
 }); 
 right.mousedown(function() { 
  scroll = true; 
  move(-options.speedup); 
 }); 
 left.mouseup(function() { 
  scroll = false; 
 }); 
 right.mouseup(function() { 
  scroll = false; 
 }); 
}
Salin selepas log masuk

Default.aspx

JQuery menu tatal kiri dan kanan coretan rujukan kod halaman kesan khas: 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>JQuery左右滚动菜单特效</title> 
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="scrollable.js"></script>
<style type="text/css">
.scrollable-render{} 
.button{cursor: hand;} 
.button:hover > * {background-position: 0 -42px;} 
.button_left{float: left; background: url(menu_out_left.gif) no-repeat 0 0; width: 4px; height: 26px;} 
.button_center{float: left; background: url(menu_out_bj.gif) repeat-x 0 0; width: 80px; text-align: center} 
.button_right{float: left; background: url(menu_out_right.gif) no-repeat 0 0; width: 4px; height: 26px;}
.ui-scrollable{width: 800px; height: 29px;} 
.ui-scrollable-container{float: left; width: 780px; height: inherit; position: relative; overflow: hidden; border-bottom: 1px solid #DDDDDD;} 
.ui-scrollable-content{float: left; width: 1770px; height: inherit;}
.ui-scrollable-left{float: left; background: url(scrollable_left_out.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;} 
.ui-scrollable-right{float: left; background: url(scrollable_right_out.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;}
.ui-scrollable-left:hover{ float: left; background: url(scrollable_left_on.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;}
.ui-scrollable-right:hover{float: left; background: url(scrollable_right_on.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;} 
</style> 
<script type="text/javascript">
$(function() { 
 scrollable('#scrollable_content', '#scrollable_render', { 
   
 }, function(originalPosition, newPosition) { 
  return true; 
 }); 
}); 
</script> 
</head> 
<body> 
<center>
 <div id="scrollable_render" class="scrollable-render"></div> 
 <div id="scrollable_content" class="ui-scrollable-content"> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单一</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单二</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单三</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单四</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单五</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单六</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单七</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单八</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单九</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单十</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单一</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单二</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单三</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单四</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单五</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单六</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单七</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单八</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单九</div> 
   <div class="button_right"></div> 
  </div> 
  <div class="button"> 
   <div class="button_left"></div> 
   <div class="button_center">菜单十</div> 
   <div class="button_right"></div> 
  </div> 
 </div>
</center> 
</body> 
</html>
Salin selepas log masuk

Sudah tentu, kami juga perlu merujuk fail rangka kerja JQuery yang saya gunakan jquery-1.4.2.min.js Anda boleh mencari dan memuat turunnya dalam talian, tetapi saya tidak akan memuat naiknya di sini . Keseluruhan kesan menu tatal kiri dan kanan JQuery kelihatan seperti ini, saya fikir ia tidak mengapa, dan saya harap ia dapat membantu beberapa rakan yang memerlukan.

Label berkaitan：
jquery滚动特效 jquery文字滚动特效 jquery滚动菜单 jquery数字滚动特效
sumber：php.cn
Artikel sebelumnya：JQuery Ajax melaksanakan pertanyaan data, pengisihan dan paging functions_jquery Artikel seterusnya：kaedah jQuery untuk mendapatkan nilai checkboxlist_jquery
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
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh menjadikan teks bertukar menjadi elemen baharu (seperti pembahagi) apabila diklik? Saya cuba mencari cara untuk menjadikan teks tertentu pada halaman bertukar menjadi pemisa...
daripada 2024-04-04 11:21:03
0
1
3580
Benamkan/iframe sentiasa tinggi penuh Saya telah membenamkan beberapa fail html yang berbeza dalam "ketinggian". Saya ...
daripada 2024-03-31 09:50:18
0
1
400
Mengapa setiap kali saya menyimpan projek Vite React saya, elemen kanvas baharu ditambahkan pada isi halaman dan bukannya menggantikan elemen kanvas sedia ada? Saya cuba mula belajar ThreeJs (saya juga baru dalam pembangunan web Javascript). Selepas ...
daripada 2024-03-30 09:57:49
0
1
396
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan