页面布局

     <div id="scroll_div" class="fl"> 
        <div id="scroll_begin">
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
        </div>
        <div id="scroll_end"></div>
    </div> 样式:
.pad_right{ padding-right:2em;}
#scroll_div {height:26px;overflow: hidden;white-space: nowrap;width:535px;margin-left:10px;}
#scroll_begin,#scroll_end {display: inline;}

js代码:

//文字横向滚动
function ScrollImgLeft(){
var speed=50;
var MyMar = null;
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++;
}
MyMar=setInterval(Marquee,speed);
scroll_div.onmouseover = function(){
       clearInterval(MyMar);
     }
     scroll_div.onmouseout = function(){
       MyMar = setInterval(Marquee,speed);      
     }  
}
ScrollImgLeft();

js实现文字横向滚动的更多相关文章

  1. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  2. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  3. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

  5. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  6. js实现文字上下滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 文字横向滚动marquee

    <div style="width:200px; height:300px"> <marquee behavior="scroll" cont ...

  8. js实现文字字幕滚动

    <div class="dggd_r" id="h" style="height:400px;overflow:hidden;display:i ...

  9. 利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)

    首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...

随机推荐

  1. Android数据加载和Json解析——蓝本

    1.下载数据来创建一个实体类 class MyData { String imagepath; String title; String desc; public MyData(String imag ...

  2. linux安装QQ

    下载链接:WineQQ2013SP6-20140102-Longene 下面步骤一定要依照顺序来,我用的系统是 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  3. NSIS:卸载时选择组件

    原文 NSIS:卸载时选择组件 有时候,我们想要在卸载时也可以选择组件,进行定制性的卸载,那么,以下文字将简略讨论这个问题: 题外:我们想要卸载时选择组件,当然是在安装时要有组件选择页面的前提下,也就 ...

  4. POJ 1026 Cipher(更换)

                                                                   Cipher Time Limit: 1000MS   Memory Li ...

  5. 写的好帮手项目官员 - Evernote 5.4(Evernote的) 中国绿色版

    Evernote (中国名:Evernote的) 是一个自由和优秀的笔记软件或个人知识管理软件.它可以帮助你有效地管理所有类型的电子票据.信息等:xbeta 我写了很多信息化管理或 Evernote ...

  6. Javascript学习5 - 函数

    原文:Javascript学习5 - 函数 在Javascript中,函数和对象是交织在一起的.有些函数的特性与对象相关联.这一点的内容在第六部分会讨论到. 这一部分主要讨论函数与其它比较熟悉的语言( ...

  7. ASPNETPager常用属性

    <webdiyer:AspNetPager ID="pager" runat="server" class="page" FirstP ...

  8. AJAX 怎样在一个UpDatePanel中刷新另一个updatePanel

    原文:AJAX 怎样在一个UpDatePanel中刷新另一个updatePanel 在页面上(.aspx)<asp:UpdatePanel ID="MyID1" runat= ...

  9. 编译AVX代码,升级Redhat 5.5 GCC至4.7.1

    Redhat 的GCC编译器4.1版本号,为SSE4,AVX,AVX2支持不够好,官方建议4.7以上. 就这样开始了GCC升级之路. 因为Redhat 5.5它安装在一个虚拟机.全然解决,经过若干尝试 ...

  10. hdu(2062)-Subset sequence 组合数学

    意甲冠军:查找集合{1,2,3...n}第一m一个排列子. 收集的线索所行的大小. 例两个元素的排列子集合按字典树排列是:{1},{1,2},{2},{2,1}: 解法:一个一个元素来确定,每次把剩余 ...