实现公告栏无缝滚动的js代码(转)「建议收藏」

实现公告栏无缝滚动的js代码(转)「建议收藏」<!DOCTYPEHTML><html><head><metacharset="gb2312"/><title&

大家好,又见面了,我是你们的朋友全栈君。

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title></title> <style> ul { margin:100px; height:22px; border:1px solid red; overflow:hidden; } li { height:22px; line-height:22px; font-size:12px; } </style> </head> <body> <ul id="a"> <li>1-1</li> <li>1-2</li> <li>1-3</li> <li>1-4</li> </ul> <script> //document.getElementById()的最简化应用 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,delay){ this.element=$(element); this.element.innerHTML+=this.element.innerHTML; this.height=height; this.delay=delay*1000; 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),5); }else{ this.counter=0; this.timer=setTimeout(this.scroll.bind(this),this.delay); } }, stop:function(){ clearTimeout(this.timer); } } new Scroll('a', 22, 2) </script> </body> </html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154586.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • idea2021 mybatiscodehelper2.9 激活码【2021免费激活】

    (idea2021 mybatiscodehelper2.9 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~0YQJ1128OW-eyJsaWNlb…

  • Java Agent字节码增强技术实现链路追踪[通俗易懂]

    Java Agent字节码增强技术实现链路追踪[通俗易懂]javaagent

    2022年10月26日
  • vue filters 是什么?怎么使用?

    vue filters 是什么?怎么使用?vuefilters是什么?首先:filter翻译成中文是过滤器的意思。而在Vue中作用其实就是对字段进行预处理怎么使用呢?就用一个小Demo,讲解一下!目的:对字段进行处理,打印出“Helloworld!!!”首先,打印出“Helle”<template> <view> {{demo}} </view></template…

  • 什么是移动端开发【重点学习系列—干货十足–一万字详解】

    什么是移动端开发【重点学习系列—干货十足–一万字详解】引言这一篇文章主要对移动端开发相关的基础知识点,进行总结。从移动端开发的一些概念、专有名词、缩放、viewport移动端事件、适配问题以及一些工作中沟通经常会用到这些方面来说一下移动端1-移动端开发相关概念移动端特点移动端与PC端网页有所不同,有以下几个特点小屏幕触摸交互屏幕尺寸繁多屏幕大小​屏幕大小指屏幕的对角线的长度,单位一般是英寸。常见的手机屏幕大小3.5、4…

  • 最新手机号段归属地数据库(2018年4月)[通俗易懂]

    最新手机号段归属地数据库(2018年4月)[通俗易懂]2018年4月1日版  382140条记录最新 手机号段数据库号码归属地数据库  全面 准确 规范字段包括省份城市运营商邮编区号等信息,对于数据分析、号码归属地查询等非常有帮助更新历史: 2018-02-01381409条记录2018-01-01380157条记录2017-12-01377357条记录2017-11-01373606条记录 2017-10-013690…

  • STM32CubeMX使用方法及功能介绍

    STM32CubeMX使用方法及功能介绍推荐分享一个大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来!http://www.captainbed.net/strongerhuang我的网站:https://www.strongerhuang.com我的知乎:https://www.zhihu.com/people/strongerHuang.comⅠ、写在前面…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号