JQuery實(shí)現(xiàn)左右滾動(dòng)菜單特效
更新時(shí)間：2015年09月28日 17:01:37 投稿：lijiao
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼，涉及jquery鼠標(biāo)事件相關(guān)技巧，具有一定參考借鑒價(jià)值，需要的朋友可以參考下
經(jīng)過(guò)了半天的時(shí)間，這個(gè)使用JQuery開(kāi)發(fā)出來(lái)的左右滾動(dòng)菜單功能也算是完成了，暫時(shí)還沒(méi)有發(fā)現(xiàn)錯(cuò)誤的現(xiàn)象?，F(xiàn)在把代碼完整的代碼拿出來(lái)分享！
scrollable.js
JQuery左右滾動(dòng)菜單特效腳本代碼引用片段：
scrollable = function(content, render, options, beforeScroll) {
/*
* @author: selfimpr
* @blog: http://blog.csdn.net/lgg201
* @e-mail: lgg860911@yahoo.com.cn
*
* 注意:
* 1. content必須自己指定寬度. 如果其中的元素使用塊元素, 請(qǐng)使用float: left向左浮動(dòng).
* 2. 使用時(shí), 盡量自定義樣式, 由于本人水平欠佳, 不能作出更加通用的東西, 呵呵.
*
* 參數(shù)解釋
* content: 內(nèi)容元素, 可以是選擇器或JQUERY封裝的DOM元素
* render: 渲染到的目標(biāo)容器, 可以是選擇器或JQUERY封裝的DOM元素
* options: 選項(xiàng)
* scrollable_class: 整體scrollable的外框架樣式 , 默認(rèn): ui-scrollable
* scrollable_left_class: 左按鈕的樣式, 默認(rèn): ui-scrollable-left
* scrollable_container_class: 內(nèi)容容器的樣式, 默認(rèn): ui-scrollable-container
* scrollable_right_class: 右按鈕的樣式, 默認(rèn): ui-scrollable-right
* delay: 鼠標(biāo)放上或點(diǎn)擊按鈕時(shí)兩次移動(dòng)之間的時(shí)間間隔, 整數(shù)
* speed: 鼠標(biāo)放上按鈕時(shí), 一次移動(dòng)的距離, 整數(shù)
* speedup: 鼠標(biāo)點(diǎn)下按鈕時(shí), 一次移動(dòng)的距離, 整數(shù)
* resizeEvent: 是否監(jiān)聽(tīng)窗口改變大小的事件, 布爾值,
* 監(jiān)聽(tīng)窗口改變大小時(shí), 在刷新頁(yè)面后, 感覺(jué)顯示有點(diǎn)別扭, 所以默認(rèn)了false
* beforeScroll: 內(nèi)容滾動(dòng)時(shí)候的事件回調(diào)方法.
* 接受參數(shù)(兩個(gè)對(duì)象): 第一個(gè)是滾動(dòng)前內(nèi)容左右位置, 第二個(gè)是滾動(dòng)后內(nèi)容左右位置.
* 注意: 該事件可以使內(nèi)容不受邊界限制的滾動(dòng).
*/
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 ? 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;
});
}
Default.aspx
JQuery左右滾動(dòng)菜單特效頁(yè)面代碼引用片段：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery左右滾動(dòng)菜單特效</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>
當(dāng)然，我們還需要引用JQuery框架文件，我這里用的是jquery-1.4.2.min.js，自己可以在網(wǎng)上搜索下載，我就不上傳到這里了。整個(gè)JQuery左右滾動(dòng)菜單特效就是這個(gè)樣子了，自己覺(jué)得還行，希望能幫到一些有需要的朋友。
您可能感興趣的文章:
- jquery toolbar與網(wǎng)頁(yè)浮動(dòng)工具條具體實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)固定在網(wǎng)頁(yè)頂部的菜單效果代碼
- jquery固定底網(wǎng)站底部菜單效果
- jQuery 菜單隨滾條改為以定位方式(固定要瀏覽器頂部)
- jQuery實(shí)現(xiàn)有動(dòng)畫(huà)淡出效果的二級(jí)折疊菜單代碼
- 基于jQuery實(shí)現(xiàn)的菜單切換效果
- jquery實(shí)現(xiàn)的簡(jiǎn)單二級(jí)菜單效果代碼
- jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
- jQuery實(shí)現(xiàn)可用于博客的動(dòng)態(tài)滑動(dòng)菜單完整實(shí)例
- jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼
- jQuery實(shí)現(xiàn)可關(guān)閉固定于底（頂）部的工具條菜單效果
相關(guān)文章
這篇文章主要介紹了JQuery右鍵菜單插件ContextMenu使用指南,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了8個(gè)超實(shí)用的jQuery功能代碼分享,本文介紹了禁用右鍵單擊功能、使用jQuery設(shè)定文本大小、在新窗口打開(kāi)鏈接、更改樣式列表、返回到頂部鏈接、獲取鼠標(biāo)指針X/Y軸等功能代碼,需要的朋友可以參考下2015-01-01
基于jQuery實(shí)現(xiàn)頁(yè)面搜索功能
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)頁(yè)面搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
本篇文章主要是對(duì)jQuery獲取(選中)單選,復(fù)選框,下拉框中的值的實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
這兩天突發(fā)奇想，結(jié)果就做了一個(gè)jQ的tip插件，形狀就像下面這樣。會(huì)隨title的多少改變大小的喲.2010-11-11
今天小編就為大家分享一篇jquery獲取元素到屏幕四周可視距離的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
jQuery實(shí)現(xiàn)的上拉刷新功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上拉刷新功能組件,涉及jQuery事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-05-05
jquery1.10去除了.live()方法，新增了一個(gè).on()方法來(lái)給元素綁定事件，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-03
這篇文章主要介紹了jQuery常用且重要方法匯總的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了json格式的javascript對(duì)象用法,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)json格式數(shù)據(jù)操作的常見(jiàn)技巧,需要的朋友可以參考下2016-07-07