经过了半天的时间,这个使用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' "font-size: larger">Default.aspxJQuery左右滚动菜单特效页面代码引用片段:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JQuery左右滚动菜单特效</title> <script language="javascript" type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.min.js">当然,我们还需要引用JQuery框架文件,我这里用的是jquery-1.4.2.min.js,自己可以在网上搜索下载,我就不上传到这里了。整个JQuery左右滚动菜单特效就是这个样子了,自己觉得还行,希望能帮到一些有需要的朋友。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“JQuery实现左右滚动菜单特效”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。