分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

scroll.js

发布时间:2023-09-06 01:25责任编辑:胡小海关键词:js

基于jquery的无缝平滑滚动插件

(function($){ ???$.fn.myScroll = function(options){ ???//默认配置 ???var defaults = { ???????speed:40, ?//滚动速度,值越大速度越慢 ???????rowHeight:24 //每行的高度 ???}; ???????var opts = $.extend({}, defaults, options),intId = []; ???????function marquee(obj, step){ ???????????obj.find("ul").animate({ ???????????marginTop: ‘-=1‘ ???????},0,function(){ ???????????????var s = Math.abs(parseInt($(this).css("margin-top"))); ???????????????if(s >= step){ ???????????????????$(this).find("li").slice(0, 1).appendTo($(this)); ???????????????????$(this).css("margin-top", 0); ???????????????} ???????????}); ???????} ???????????????this.each(function(i){ ???????????var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); ???????????intId[i] = setInterval(function(){ ???????????????if(_this.find("ul").height()<=_this.height()){ ???????????????????clearInterval(intId[i]); ???????????????}else{ ???????????????????marquee(_this, sh); ???????????????} ???????????}, speed); ???????????_this.hover(function(){ ???????????????clearInterval(intId[i]); ???????????},function(){ ???????????????intId[i] = setInterval(function(){ ???????????????????if(_this.find("ul").height()<=_this.height()){ ???????????????????????clearInterval(intId[i]); ???????????????????}else{ ???????????????????????marquee(_this, sh); ???????????????????} ???????????????}, speed); ???????????}); ??????????????}); ???}})(jQuery);

使用方法

先引入jquery类库,后初始化插件参数,不设置即为默认值

$(‘#scroll‘).myScroll({ ???speed:40, ?//滚动速度,值越大速度越慢 ???rowHeight:24 //每行的高度})

注:以上为垂直滚动,如需水平滚动请修改相应参数("rowHeight"/"margin-top")

scroll.js

原文地址:http://www.cnblogs.com/yxrs/p/7853849.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved