介绍
这篇文章将为大家详细讲解有关如何使用JavaScript实现的原生态兼容IE6可调可控滚动文字功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>一、基本目标
如下图,一开始文字能在px - 400 px这15个区域以每0.05秒,5 px像素的无缝滚动,当然,改改下面的脚本,你让我从地球滚动到外太空都没问题,只要你告诉我地球的px和外太空的px就行了,然后设置两个按钮,你点击“停止”它就停止,停止之后点击“开始”就让它开始,它在“开始”的状态你点N下“开始”是不会出错误的,继续保持这个状态,它在“停止”状态,你点N下“停止”也是没有问题的。
<强>二,HTML布局
代码如下:
& lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比;
& lt; title> marquee
& lt;/head>
& lt; body>
& lt; div> sssssss
& lt; div id=癿arquee",祝辞marquee
& lt; div> sssssss
& lt; button onclick=皉eturn marquee_move_stop()“在停止& lt;/button>
& lt; button onclick=皉eturn marquee_move_start()“在开始& lt;/button>
& lt;/body>
& lt;/html>
思想如下图,一图胜千言,不说了。请自行对比代码与图。
<强>三、脚本部分
这里是整个控件的核心。
& lt; script>//设置其滚动速度是5 px/0.05 s,这样能够实现无缝滚动,不会一卡一卡的。
var 速度=5;
var marqueeTimer=setInterval (“marquee_move ()“, 50);//这个变量主要是用来下面控制滚动开始与停止的两个函数
var isMarqueeMove=true;//滚动的核心函数
function marquee_move () {//这才能么长的代码主要是为了把带px的padding-left转化为一个可以操作的数//如才能padding-left: 0 px;经过这一行代码之后var marquee_x=0;
var 才能;marquee_x=方法(. getelementbyid (“marquee") .style.paddingLeft.substring (0 . getelementbyid (“marquee") .style.paddingLeft.indexOf (“px")));//才能如果滚过400 px这个位置,那就向反方向走,反之亦然
如果才能(marquee_x> 400) {
,,,速度=5;
,,}//这才能里不要设置成0,可能会产生越界bug
如果才能(marquee_x<15) {
,,,速度=5;
,,}//才能文字向右滚5 px
,,. getelementbyid (“marquee") .style.paddingLeft=marquee_x +速度+“px";
}//下面控制滚动开始与停止的两个函数//之所以要立国旗,是因为marqueeTimer=setInterval (“marquee_move()“, 50);多次被执行,滚动会变得很快和无法控制//后方的计时器不会替换到前方的计时器
function marquee_move_stop () {
如果才能(isMarqueeMove) {
,,,clearTimeout (marqueeTimer);
,,,isMarqueeMove=false;
,,}
}
function marquee_move_start () {
如果才能(! isMarqueeMove) {
,,,marqueeTimer=setInterval (“marquee_move ()“, 50);
,,,isMarqueeMove=true;
,,}
}
& lt;/script> <强>四,总结
1, CSS中,凡是带——的属性,在javascript要换成大写,如CSS的padding-left在javascript是paddingLeft,否则会被当成减号处理
2,利用padding-left来完成这个组件,就不用使用左要设置绝对定位,然后又要考虑这个组件怎么摆放了。
3,这个东西在浏览器的百分比宽度内滚动,最好不要这样做,毕竟javascript中取出浏览器的宽度可能会遇到各种各样的兼容性问题。还是设置一个定值,这样的代码简短。
<强>附:HTML比较冷门标签与属性
1。<代码> & lt; hr>
2 . <代码> & lt; marquee>
微软这个家伙在最新的IE8下已经放弃对字幕的支持了(我这里很无语,选框是微软自己创造出来的,现在火狐都支持了,它自己不干了)
