帮助中心

首页网页特效整站源码 PHP实例网站模版工具箱常用代码论坛游戏源码资源分享

JS实现文字定时向上翻滚滚动的特效实例

浏览：764次- 评论：1次- 发布时间：2019-08-22

Html

Css

Js


 
素材牛特效网一号滚动新闻
素材牛特效网二号滚动新闻
素材牛特效网三号滚动新闻
素材牛特效网四号滚动新闻
素材牛特效网五号滚动新闻
素材牛特效网六号滚动新闻
素材牛特效网七号滚动新闻
素材牛特效网八号滚动新闻/a>

function $(element){
 if(arguments.length>1){
  for(var i=0,length=arguments.length,elements=[];i<length;i++){
   elements.push($(arguments[i]));
  }
  return elements;
 }
 if(typeof element=="string"){
  return document.getElementById(element);
 }else{
  return element;
 }
}
var Class={
 create:function(){
  return function(){
   this.initialize.apply(this,arguments);
  }
 }
}
Function.prototype.bind=function(object){
 var method=this;
 return function(){
  method.apply(object,arguments);
 }
}
var Scroll=Class.create();
Scroll.prototype={
 initialize:function(element,height){
  this.element=$(element);
  this.element.innerHTML+=this.element.innerHTML;
  this.height=height;
  this.maxHeight=this.element.scrollHeight/2;
  this.counter=0;
  this.scroll();
  this.timer="";
  this.element.onmouseover=this.stop.bind(this);
  this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);
 },
 scroll:function(){
  if(this.element.scrollTop<this.maxHeight){
   this.element.scrollTop++;
   this.counter++;
  }else{
   this.element.scrollTop=0;
   this.counter=0;
  }
  if(this.counter<this.height){
   this.timer=setTimeout(this.scroll.bind(this),22);
  }else{
   this.counter=0;
   this.timer=setTimeout(this.scroll.bind(this),3126);
  }
 },
 stop:function(){
  clearTimeout(this.timer);
 }
}
var myscroll=new Scroll("zzjs_1",26);

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

素材牛VIP永久特权

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：js实现文字定时向上翻滚滚动的特效实例 js文字定时向上滚动效果，鼠标经过时暂停滚动，自定义滚动速度，兼容当前主流浏览器。

js文字定时向上滚动效果，鼠标经过时暂停滚动，自定义滚动速度，兼容当前主流浏览器。

讨论这个常用代码（1）回答他人问题或分享心得会奖励牛币

qq***43

2019年12月26日

翻滚标签

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

我的积分余额：0 已下载次数：764

所需牛币：5 开始下载

牛币获取：签到、评论、充值 » 在线充值（10牛币=1元）

成为VIP可永久免积分下载全部常用代码 » 查看详情