JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解


Posted in Javascript onSeptember 19, 2017

本文实例讲述了JavaScript实现的原生态兼容IE6可调可控滚动文字功能。分享给大家供大家参考,具体如下:

虽然HTML里面本身就有marquee标签,用来设置滚动文字(marquee标签在附录【HTML比较冷门标签与属性】里会有具体介绍)这个标签到了IE8就开始不支持,在IE6中可以设置的东西也很少,所以这东西还是用javascript来写为好。这个小组件也是比较常见的,但是网上的代码质量还是为了很多无关紧要的小特效而增加了许多无谓的代码。其实这东西,你只要弄得能自己向右向左滚,到了屏幕边缘自动返回就行了,为什么要为了一些淡入淡出的华而不实的东西,而写一大摞代码了。下面介绍一个自己写的利用padding-left实现滚动文字,因为padding-left这个东西在大多数浏览器还是没有问题的。

一、基本目标

如下图,一开始文字能在15px-400px这个区域以每0.05s,5px像素的无缝滚动,当然,改改下面的脚本,你让我从地球滚动到外太空都没问题,只要你告诉我地球的px和外太空的px就行了,然后设置两个按钮,你点击“停止”它就停止,停止之后点击“开始”就让它开始,它在“开始”的状态你点N下“开始”是不会出BUG的,继续保持这个状态,它在“停止”状态,你点N下“停止”也是没有问题的。

JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

二、HTML布局

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>marquee</title>
</head>
<body>
<div>sssssss</div>
<div id="marquee" style="padding-left:0px;">marquee</div>
<div>sssssss</div>
<button onclick="return marquee_move_stop()">停止</button>
<button onclick="return marquee_move_start()">开始</button>
</body>
</html>

思想如下图,一图胜千言,不说了。请自行对比代码与图。

JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

三、脚本部分

这里是整个控件的核心。

<script>
//设置其滚动速度是5px/0.05s,这样能够实现无缝滚动,不会一卡一卡的。
var speed=5;
var marqueeTimer=setInterval("marquee_move()",50);
//这个变量主要是用来下面控制滚动开始与停止的两个函数
var isMarqueeMove=true;
//滚动的核心函数
function marquee_move(){
  //这么长的代码主要是为了把带px的padding-left转化为一个可以操作的数
  //如padding-left:0px;经过这一行代码之后var marquee_x=0;
  var marquee_x=parseInt(document.getElementById("marquee").style.paddingLeft.substring(0,document.getElementById("marquee").style.paddingLeft.indexOf("px")));
  //如果滚过400px这个位置,那就向反方向走,反之亦然
  if(marquee_x>400){
    speed=-5;
  }
  //这里不要设置成0,可能会产生越界bug
  if(marquee_x<15){
    speed=5;
  }
  //文字向右滚5px
  document.getElementById("marquee").style.paddingLeft=marquee_x+speed+"px";
}
//下面控制滚动开始与停止的两个函数
//之所以要立flag,是因为marqueeTimer=setInterval("marquee_move()",50);多次被执行,滚动会变得很快和无法控制
//后方的计时器不会替换到前方的计时器
function marquee_move_stop(){
  if(isMarqueeMove){
    clearTimeout(marqueeTimer);
    isMarqueeMove=false;
  }
}
function marquee_move_start(){
  if(!isMarqueeMove){
    marqueeTimer=setInterval("marquee_move()",50);
    isMarqueeMove=true;
  }
}
</script>

四、总结

1、CSS中,凡是带-的属性,在javascript要换成大写,如CSS的padding-left在javascript是paddingLeft,否则会被当成减号处理

2、利用padding-left来完成这个组件,就不用使用left要设置绝对定位,然后又要考虑这个组件怎么摆放了。

3、这个东西在浏览器的百分比宽度内滚动,最好不要这样做,毕竟javascript中取出浏览器的宽度可能会遇到各种各样的兼容性问题。还是设置一个定值,这样的代码简短。

附:HTML比较冷门标签与属性

1.<hr>标签能够添加一条水平分隔线。单标记标签,拥有属性width,size,color,align(后接值)noshade(直接添加,如文本框的disabled,表示这条水平线是无阴影的)

2.<marquee>标签已经被微软废除了。

微软这个家伙在最新的IE8下已经放弃对MARQUEE的支持了(我这里很无语,MARQUEE是微软自己创造出来的,现在火狐都支持了,它自己不干了)

用marquee有诸多问题的。DW给你提示是警告你慎重。

如下面的代码在IE8的滚动是存在问题的,当图片滚完之后会自动刷新,相当难看,无法现实无缝滚动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动</title>
</head>
<body>
<marquee width=250px behavior="scroll">
<a href="http://www.163.com" rel="external nofollow" ><img src="img0.jpg" width=100 hspace=50/></a>
<a href="http://www.baidu.com" rel="external nofollow" ><img src="img28.jpg" width=100px /></a>
</marquee>
</body>
</html>

3.<strong>标签是强调标签,基于内容。<b>是物理样式。<sup><sub>双标记标签能分别使字体上标与下标

4.©是代表版权字符©,®则是注册商标, 是空格

5.对于图片,其hspace属性能够设置图片与图片之间的间距。

6.<body>标签也是有属性的vlink link 能够分别设置访问了与未访问超链接的颜色,leftmargin与topmargin能够分别规定文档的左边距与上边距

7.<meta name="keywords" content="搜索关键词"><meta name="description content="网页描述">能分别设置被搜索引擎抓取的关键词与网页描述

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
解决js正则匹配换行问题实现代码
Dec 10 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
angular十大常见问题
Mar 07 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
JavaScript实现登录窗体
Jun 22 Javascript
vue实现页面加载动画效果
Sep 19 #Javascript
深入理解Node.js中通用基础设计模式
Sep 19 #Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 #Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 #Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 #Javascript
JavaScript 中的 this 简单规则
Sep 19 #Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 #Javascript
You might like
MySQL数据源表结构图示
2008/06/05 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
JS创建Tag标签的方法详解
2017/06/09 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
python3生成随机数实例
2014/10/20 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python正则表达式的使用
2017/06/12 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
警察思想汇报
2014/01/04 职场文书
农村党支部先进事迹
2014/01/14 职场文书
求职信范文大全
2014/05/26 职场文书
关于保护环境的标语
2014/06/09 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
同意迁入证明模板
2014/10/26 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python