文档章节

js实现的文字横向无间断滚动

Mike老婆
 Mike老婆
发布于 2017/03/14 13:37
字数 278
阅读 21
收藏 0

       为实现文字横向无间断滚动,最开始想到的HTML的标签<marquee>,因为它可以实现横向滚动。经理说它的起始位置从最右边出来的,能不能将它改成从中间出来,或者从最左边出来也行。查了相关资料,才知道<marquee>无法指定起始位置。那么为了实现这一滚动的效果,用到了js的方式。步骤如下:

from表单

js相关代码

【在网页上找的相关代码,复制可直接运行看到效果】


<style type="text/css"> 
    #gongao{width:100px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;} 
    #gongao #scroll_begin, #gongao #scroll_end{display:inline} 
</style> 
<script type="text/javascript"> 
    function ScrollImgLeft(){ 
        var speed=50; 
        var scroll_begin = document.getElementById("scroll_begin"); 
        var scroll_end = document.getElementById("scroll_end"); 
        var scroll_div = document.getElementById("scroll_div"); 
        scroll_end.innerHTML=scroll_begin.innerHTML; 
    function Marquee(){ 
        if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
            scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
        else 
            scroll_div.scrollLeft++; 
    } 
    var MyMar=setInterval(Marquee,speed); 
    scroll_div.onmouseover=function() {
        clearInterval(MyMar);
    } 
    scroll_div.onmouseout=function() {
        MyMar=setInterval(Marquee,speed);
    } 

</script> 
<div id="gongao"> 
<div style="width:90px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div"> 
<div id="scroll_begin"> 
    这是滚动的部分
</div> 
<div id="scroll_end"></div> 
</div> 
<script type="text/javascript">ScrollImgLeft();</script> 
</div> 

© 著作权归作者所有

共有 人打赏支持
Mike老婆
粉丝 1
博文 13
码字总数 2598
作品 0
程序员
私信 提问
10 个jQuery/JavaScript的圣诞主题效果

圣诞节快到了,赶快为你的网站打扮一番,换上节日的盛装吧!本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果,希望能给你带来些许惊喜。(PS:经过小编测试,下面的部分效果仅...

开心303
2011/12/13
2.5K
8
常用CSS语句

控制横向和纵向滚动条的显隐? 去掉x轴 去掉y轴 不显 表格变色 禁止复制,鼠标拖动选取 普通iframe页面 iframe自适应高度 IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标 字号缩放 ...

晨曦之光
2012/05/16
316
0
2010 年 Web 设计风 (下)

新闻来源:Smashing Magazine Web 设计是个变幻无常的行业,如今已经成为一个包含了美学体验,功能丰富的富媒体,事实上,当今的 Web 正处在黄金时代,我们拥有强大的新工具,唾手可得的丰富资...

红薯
2010/05/08
427
4
ntv.js框架(第二章) - 源代码目录结构

源代码目录结构: css // 包含一些标签默认样式重置、常用class、组件所需的css样式 images // 包含了2张透明图,具体用处后续介绍(可选目录) js // 框架核心代码 js/effect // 框架提供的...

coton_chen
2015/01/27
0
0
[javascript]文字无缝向上滚动

静态代码: 解释:首先最外层是一个高度只有30px的层,这样大概只能显示一行文字。然后里面有一个 #marquee的层,这个层包含了很多段文字,高度实际超出30px很多,我们要实现的就是将#marque...

吾爱
2014/09/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

带你看数据挖掘与机器学习-厦大EDP上课出勤预测

带你看数据挖掘与机器学习-厦大EDP上课出勤预测 标签: 数据挖掘 特征工程 机器学习 出勤预测 write by xmhexi 2019/3/22 内容提要 首先说明本文是一篇科普文章,通过一个实际案例,帮助理解什...

xmhexi
今天
41
0
IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
4
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
3
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
10
0
java多线程2

“非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在线程安全问题。这是因为方法内部的变量都是私有造成的。 synchronized 获取的都是对象锁。如果多个线程访问多个...

一滴水穿石
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部