JQuery實作左右滾動選單特效_jquery
經過了半天的時間，這個使用JQuery開發出來的左右滾動選單功能也算是完成了，暫時還沒有發現錯誤的現象。現在把程式碼完整的程式碼拿出來分享！
scrollable.js
JQuery左右滾動選單特效腳本程式碼引用片段：
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 ? 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左右滾動選單特效頁面程式碼引用片段：
<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>登入後複製
當然，我們還需要引用JQuery框架文件，我這裡用的是jquery-1.4.2.min.js，自己可以上網搜尋下載，我就不上傳到這裡了。整個JQuery左右滾動選單特效就是這樣了，自己覺得還行，希望能幫到一些有需要的朋友。
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
3 週前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前
By DDD
威爾R.E.P.O.有交叉遊戲嗎？
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何使用源地圖調試縮小JavaScript代碼？
Mar 18, 2025 pm 03:17 PM
本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
