非常不错的不间断循环滚动类兼容多浏览器_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

非常不错的不间断循环滚动类兼容多浏览器_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:22 PM

调用的方法：
首先你得把脚本链接到你的页面，或者直接调用下面这个链接也行。当然，最好还是下载到你自己的机器上。

复制代码代码如下:

下面是第一种使用方法，看起来似乎比较麻烦一点，但是只需要两行代码；

复制代码代码如下:

var sampleDiv = new scrollingAD("divId", 200, 100, "yellow", "up", 10, 2000, 20, true);  
sampleDiv.move(); 

这样将根据文档中 id="divId" 的某个 DIV 对象来创建一个不间断的循环滚动区域。该区域的宽度为 200px，高度为 100px，背景颜色为黄色（不用担心你的英文不好，也可以用“#ff00ff”这样的格式），方向为向上滚动。其实你也可以选择向左滚动，只要把 "up" 改成 "left" 就行了。但是不支持向右和向下滚动，所以不用尝试 "right" 和 "down"——其实要实现这两个方向也很容易，不过个人觉得不太实用，所以就没做了——每滚动 1px 的延迟时间为 10ms，也就是理想状态下是每秒钟滚动 100px。每滚动 20px 暂停一次，每次暂停的时间是 2 秒。并且支持鼠标悬停。
上面提到的参数的排列顺序是必须严格遵守的，也就是说得按照下面的顺序来排列。如果你想偷懒，可以使用逗号略过：

复制代码代码如下:

1、图层的 ID，必须的参数，不填或者拼写错误将会报错；  
2、滚动区域的宽度，默认值是 200px，所有的默认值都可以在 scrollingAD 里面修改；  
3、滚动区域的高度，默认值是 50px；  
4、背景颜色，默认值是 "transparent"，也就是透明啦；  
5、方向，可选值 "up/left"；  
6、每滚动 1px 的延迟时间，默认值 20，单位是 ms——这个值越大滚动越慢；  
7、每滚动限定距离后停滞的时间，单位也是 ms，默认值 2000，也就是 2 秒啦——如果你不想停滞的话，把它设为 0 就行了；  
8、每两次停滞之间滚动的距离，默认值是一屏。也就是说如果你设定的方向是 "up" 的话，默认值即等于滚动区域的高度，反之方向为 "left"，则默认值为滚动区域的宽度；  
9、是否悬停，默认是 true，这个你不填也没关系；

第二种方法是这样的：

复制代码代码如下:

var sampleDiv = new scrollingAD("divId");  
sampleDiv.move();  
这样使用的全部都是默认值，不过你应该会觉得必须改掉某个参数才行，那你可以这样：  
var sampleDiv = new scrollingAD("divId");  
sampleDiv.width = 500;  
sampleDiv.height = 100;  
sampleDiv.bgColor = "red";  
sampleDiv.direction = "left";  
sampleDiv.delay = 10;  
sampleDiv.pauseTime = 1000;  
sampleDiv.size = 50;  
sampleDiv.isHover = false;  
sampleDiv.move(); 

当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。
需要注意的是，你应该使用这样的顺序来建立这个滚动区域：

<title>效果演示</title>  
  
  
<h3 id="建立图层">建立图层</h3>  
<div id="sampleDiv" style="font-size: 12px; line-height: 20px;">  
当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。  
</div>  
<h3 id="然后调用脚本文件">然后调用脚本文件</h3>  
<script type="text/javascript">  
function scrollingAD(_id, _width, _height, _bgColor, _direction, _delay, _pauseTime, _size, _isHover) {  
    this.id              = _id;  
    this.width           = _width;  
    this.height          = _height;  
    this.bgColor         = _bgColor;  
    this.direction       = _direction;  
    this.delay           = _delay;  
    this.pauseTime       = _pauseTime;  
    this.size            = _size;  
    this.object          = null;  
    this.isMove          = true;  
    if((this.id == "") || (this.id == null)) {  
        alert("必须输入对象的 ID 才能创建滚动区域！");  
        this.isMove = false;  
        return false;  
    }  
    if(document.getElementById(this.id)) {  
        this.object = document.getElementById(this.id);  
    } else {  
        window.alert("滚动区域创建失败！
请确认 " + this.id + " 是否拼写错误。");  
        this.isMove = false;  
        return false;  
    }  
}  
scrollingAD.prototype.checkNumber = function(_attribute, defaultValue) {      
    if(isNaN(_attribute)) {  
        return defaultValue;  
    } else {  
        return ((typeof(parseInt(_attribute)) == "number") ? parseInt(_attribute) : defaultValue);  
    }  
}  
scrollingAD.prototype.move = function() {  
    if(this.isMove == false) return false;  
    var defaultWidth           = 200;  
    var defaultHeight          = 50;  
    var defaultDelay           = 20;  
    var defaultPauseTime       = 2000;  
    var defaultIsHover         = true;  
    var defaultBgColor         = "transparent";  
    var defaultDirection       = "up";  
    this.width          = this.checkNumber(this.width, defaultWidth);  
    this.height         = this.checkNumber(this.height, defaultHeight);  
    this.delay          = this.checkNumber(this.delay, defaultDelay);  
    this.pauseTime      = this.checkNumber(this.pauseTime, defaultPauseTime);  
    this.isHover        = (typeof(this.isHover) == "boolean") ? this.isHover : defaultIsHover;  
    if(this.direction == "left") {  
        this.size       = this.checkNumber(this.size, this.width);  
    } else {  
        this.size       = this.checkNumber(this.size, this.height);  
    }  
    if((this.bgColor == null) || (typeof(this.bgColor) == undefined)) {  
        this.bgColor = defaultBgColor;  
    } else {  
        this.bgColor = this.bgColor;  
    }  
    if((this.direction == null) || (typeof(this.direction) == undefined)) {  
        this.direction = defaultDirection;      
    } else {  
        this.direction = (this.direction.search(/(^up$)|(^left$)/gi) != -1) ? this.direction.toLowerCase() : defaultDirection;  
    }  
    // 创建滚动区域；  
    with(this.object) {  
        style.display         = "block";  
        style.width           = this.width + "px";  
        style.height          = this.height + "px";  
        style.overflow        = "hidden";  
        style.backgroundColor = this.bgColor;  
    }  
    if(this.direction == "up") {  
        this.object.innerHTML = "<div id=\"" + this.id + "_mirror\">" + this.object.innerHTML + "</script>

" + "

" + this.object.innerHTML + "

"; } else { this.object.innerHTML = "" + this.object.innerHTML + "" + "" + this.object.innerHTML + ""; } if(document.getElementById(this.id)) { var evalString; if(this.direction == "up") { evalString = "scrollToUp(\"" + this.id + "\", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) "; } else { evalString = "scrollToLeft(\"" + this.id + "\", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) "; } eval(evalString); } else { return false; } function pixelToNum(_string) { //该函数用于去掉数值后面的px，并将之转化为数字。 if(_string.slice(_string.length - 2) == "px") { return parseInt(_string.slice(0, (_string.length - 2))); } else { return _string; } } function scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s) { var obj = document.getElementById(_id); var mirror = document.getElementById(_id + "_mirror"); if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginLeft) >= 0) { var evalString =_id + "_timer = window.setTimeout(function() {scrollToLeft(\"" + _id + "\", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")"; if(_isHover) { mirror.onmouseover = function() {document.getElementById(_id + "_isHover").value = 0;} mirror.onmouseout = function() {document.getElementById(_id + "_isHover").value = 1;} var step = parseInt(document.getElementById(_id + "_isHover").value); mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - step) + "px"; eval("var " + evalString); } else { mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - 1) + "px"; eval("var " + evalString); } } else { if(mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) >= 0) { _s += 1; window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime); } else { mirror.style.marginLeft = mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) + "px";; window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime); } } } function scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s) { var obj = document.getElementById(_id); var mirror = document.getElementById(_id + "_mirror"); if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginTop) >= 0) { var evalString =_id + "_timer = window.setTimeout(function() {scrollToUp(\"" + _id + "\", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")"; if(_isHover) { mirror.onmouseover = function() {document.getElementById(_id + "_isHover").value = 0;} mirror.onmouseout = function() {document.getElementById(_id + "_isHover").value = 1;} var step = parseInt(document.getElementById(_id + "_isHover").value); mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - step) + "px"; eval("var " + evalString); } else { mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - 1) + "px"; eval("var " + evalString); } } else { if(mirror.offsetHeight + pixelToNum(mirror.style.marginTop) >= 0) { _s += 1; window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime); } else { mirror.style.marginTop = mirror.offsetHeight + pixelToNum(mirror.style.marginTop) + "px";; window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime); } } } }

最后建立滚动区域

如果脚本报错，可能是因为我的网站速度连接太慢的原因，只要刷新一下页面就行了。

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 提示：您可以先修改部分代码再运行
更新：
现在可以使用百分比来定义 size 参数了，像这样：
var sampleDiv = new scrollingAD("sampleDiv");
sampleDiv.size = "50%";// 注意，一定要加引号，否则会出错。
sampleDiv.move();
得到的效果就是一个循环只滚动两次，同理一次滚完一个循环的话，将 size 设置为 "100%" 就行了。不过不建议随意设置百分比，请尽量设置成与行数相符的数值，否则可能出现意外的空白。
当然，仍然支持数字：）

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。