简单的jQuery无缝向上滚动效果

html

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>简单的jQuery无缝向上滚动效果演示1_dowebok</title><style>* { margin: 0; padding: 0;}.myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: hidden;}.myscroll li { height: 26px; margin-left: 25px;}.myscroll a { color: #333; text-decoration: none;}.myscroll a:hover { color: #ED5565; text-decoration: underline;}</style><script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript" src="js/scroll.js"></script><script type="text/javascript">$(function(){   $(‘.myscroll‘).myScroll({      speed: 20, //数值越大,速度越慢      rowHeight: 26, //li的高度   });});</script></head>

<body><h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的jQuery无缝向上滚动效果演示1</h1>

<div class="menu">   <a class="cur" href="index.html">演示1(文字滚动)</a>   <a href="index2.html">演示2(图片滚动)</a></div>

<div class="myscroll">   <ul>      <li><a href="http://www.dowebok.com/68.html">用FlexSlider制作支付宝2013版幻灯片</a></li>      <li><a href="http://www.dowebok.com/67.html">扁平化UI/Flat UI Kit(PSD)</a></li>      <li><a href="http://www.dowebok.com/66.html">童趣卡通圣诞老人矢量素材(EPS)</a></li>      <li><a href="http://www.dowebok.com/65.html">63个线性图标素材(PSD)</a></li>      <li><a href="http://www.dowebok.com/64.html">15个音乐类图标素材(AI)</a></li>      <li><a href="http://www.dowebok.com/63.html">jQuery侧边导航插件SidebarJS</a></li>      <li><a href="http://www.dowebok.com/62.html">jQuery计时器插件TimeCircles</a></li>      <li><a href="http://www.dowebok.com/61.html">jQuery仿Google Play幻灯片效果插件plusview</a></li>      <li><a href="http://www.dowebok.com/60.html">100个圣诞节矢量图标(PSD/SVG)</a></li>      <li><a href="http://www.dowebok.com/59.html">用FlexSlider制作《枪神纪》幻灯片效果</a></li>      <li><a href="http://www.dowebok.com/68.html">用FlexSlider制作支付宝2013版幻灯片</a></li>      <li><a href="http://www.dowebok.com/67.html">扁平化UI/Flat UI Kit(PSD)</a></li>      <li><a href="http://www.dowebok.com/66.html">童趣卡通圣诞老人矢量素材(EPS)</a></li>      <li><a href="http://www.dowebok.com/65.html">63个线性图标素材(PSD)</a></li>      <li><a href="http://www.dowebok.com/64.html">15个音乐类图标素材(AI)</a></li>      <li><a href="http://www.dowebok.com/63.html">jQuery侧边导航插件SidebarJS</a></li>      <li><a href="http://www.dowebok.com/62.html">jQuery计时器插件TimeCircles</a></li>      <li><a href="http://www.dowebok.com/61.html">jQuery仿Google Play幻灯片效果插件plusview</a></li>      <li><a href="http://www.dowebok.com/60.html">100个圣诞节矢量图标(PSD/SVG)</a></li>      <li><a href="http://www.dowebok.com/59.html">用FlexSlider制作《枪神纪》幻灯片效果</a></li>   </ul></div>

</body></html>

js

// JavaScript Document(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);

html

npm install webpack -g 

html

原文地址:https://www.cnblogs.com/lyk562564104/p/9229013.html

时间: 2024-10-12 22:51:25

简单的jQuery无缝向上滚动效果的相关文章

jquery无缝向上滚动实现代

<!DOCTYPE html><html><head><style type="text/css">.renav{width:200px;height:150px;overflow:hidden;}.renav li{height:21px;border-bottom:solid 1px blue;list-style-type:none;}</style><body><div class="ren

jquery插件之文字无缝向上滚动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

产品图片无缝水平滚动效果代码

产品图片无缝水平滚动效果代码:在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如何实现此特效的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料,大多都是基于jquery的,虽然稍作修改就可以用于移动端,但不能实现触摸上下翻滚.所以就去了zepto的官网查看其API,却发现如果要使用zepto的swipe()方法,需要引用其已经封装好的touch.js文件,我就赶紧引用了这个js文件,可在实际测试中,官网给出的touch.js文件

jQuery 随滚动条滚动效果 (适用于内容页长文章)

直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollOut = $('.cookie-list'); //隐藏rollStart之后的区块 rollStart.before('<div class="da_rollbox">

jQuery 随滚动条滚动效果 (固定版)

//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"

文字列表无缝向上滚动JavaScript代码

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>文字列表无缝向上滚动JavaScript代码-代码库</title> <style> *{margin:0px;padding:0px;border:0px;} body{font-size:12px} a{color:#333333; text-decoration:none;} a:hover{color

vue文字间歇无缝向上滚动

公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁让是人家给你发工资呢!!! 其实,这种用在vue项目中的需求跟原生js的实现方法基本一致,且实现的方法有多种,今天就单拎出来一种实现方法吧: <div class="scroll-up" ref="scroll"> <ul> <li v-f

jQuery自定义数字滚动效果

每日分享效果时间到,今日分享:jQuery自定义数字滚动效果 效果图: 一.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!--优先