php左右菜单,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 = $('
')
.attr('id', 'scrollable_' + content.attr('id'))
.attr('className', options.scrollable_class);
var left = $('
')
.attr('id', 'scrollable_left_' + content.attr('id'))
.attr('className', options.scrollable_left_class);
left.text(options.leftText);
var container = $('
')
.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 = $('
')
.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左右滚动菜单特效页面代码引用片段:
php左右菜单,JQuery实现左右滚动菜单特效_jquery相关推荐
- jQuery左右循环滚动图片特效
在线演示 本地下载 转载于:https://www.cnblogs.com/lovellll/p/10098430.html
- jquery图片左右滚动切换js特效
下载地址 jquery图片左右滚动切换特效,左右箭头控制图片滚动的网页特效代码.$(".productshow").xslider({ //.productshow是要移动对象的外 ...
- 精妙绝伦的jQuery——改进导航:菜单、标签及折叠选项
一.让页面上所有的链接都在新窗口打开. html代码: <ul id="links"> <li><a href="http://www.y ...
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce& ...
- JQuery之ContextMenu(右键菜单)
JQuery之ContextMenu(右键菜单) 插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextme ...
- 手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
- JQuery学习系列总结—菜单制作
1.页面中的菜单项可以通过嵌套的ul和li来表示 2.菜单最外层为ul,一层每个主菜单放在一个li中,如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套即可构建多层的菜单 3.浏览器中ul和l ...
- 模仿网易新闻客户端的滚动菜单
模仿网易新闻客户端的滚动菜单,点击菜单的时候有放大标题的动画效果.demo地址:https://github.com/BigHub/ScrollMenuViewTest 需要用到facebook的开源 ...
- CSS3/jQuery创意盒子动画菜单
作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示 ...
最新文章
- Ubantu下hadoop运行第一个例子wordcount过程
- SAP RETAIL 特性树(Characteristic Tree)的定义
- 用FIO测试存储性能
- 113 - Power of Cryptography 浮点数 pow()函数
- IOS多线程开发其实很简单
- linux安装comfast网卡驱动,电脑如何通过usb共享手机网络 Linux安装wifi 无线网络 811AC usb网卡驱动...
- 为什么吃红薯容易放屁
- Label-dependent Feature Extraction in Social Networks for Node Classification
- sql server 2005 使用Log Explorer查看和恢复数据
- 音视频的采集、编码、封包成 mp4 输出
- php字符串的截取方式
- 京东java面试流程_java京东社招面试经历
- python zip压缩_用Python处理ZIP压缩包
- mysql出现1048_MySQLdb_异常操作错误:(1048,“……不能为空”)
- php mysql webim_webim(icomet) 使用
- CodeForces - [ACM-ICPC Jiaozuo Onsite A]Xu Xiake in Henan Province(模拟)
- 操作系统课设详细解答
- 【MySQL】DROP TABLE, TRUNCATE区别
- zblog host php,zblog获取当前页面的URL信息
- 计算机函数公式用法教程average,average函数怎么用?Excel下average函数的使用方法...
热门文章
- 大快人心!和P2P网贷彻底说再见
- 小米MIXAlpha将首发1亿像素传感器:1/1.33英寸大底业内无敌
- 中国联通公布8月运营数据出炉 4G用户大幅度提升
- 故宫4天门票已售罄 五一假期大家都去哪儿“看一看”了?
- 马云妇女节寄语女性:没有败家的女人 只有爱家的女人
- 支付宝信用卡还款也开始收费了!但还是比微信便宜2元...
- 突然!格力电器向全体股东分红36.1亿元 董明珠得2600万
- 再谈网络字节顺序,大小端问题
- 程序员不知道怎么和女生约会?进来看看这篇文章
- 应用人工智能识别增加教育医疗产品的趣味和实用性