页面布局

     <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. hadoop2.0的datanode数据存储文件夹策略的多个副本

    在hadoop2.0在,datanode数据存储盘选择策略有两种方式复制: 首先是要遵循hadoop1.0磁盘文件夹投票,实现类:RoundRobinVolumeChoosingPolicy.java ...

  2. LinkedBlockingQueue的put,add跟offer的区别(转)

    LinkedBlockingQueue的put,add和offer的区别 最近在学习<<Java并发编程实践>>,有很多java.util.concurrent包下的新类.Li ...

  3. jsp跳转后台代码页的简易方式~

    jsp跳转到代码隐藏页.有几种方法,例如,: action方式: jquery方式,码如下面: function regCust(){         $('#containerFRM').form( ...

  4. Spring3+SpingMVC+Hibernate4全注解环境配置

    Spring3+SpingMVC+Hibernate4全注解环境配置 我没有使用maven,直接使用Eclipse创建动态Web项目,jar包复制在了lib下.这样做导致我马上概述的项目既依赖Ecli ...

  5. jquery中 $ 和 jQuery 及 $() 的差别

    用过jquery的人都知道,jquery有两种使用方法,一种是$,另一种是jQuery,那么这两种方式在使用上有什么差别呢? 答案是这两种使用方法没什么差别,仅仅是别名而已,用$要比jQuery简短一 ...

  6. springmvc集成Ueditor插件实现图片上传2、

    一.下载Ueditor插件. 地址:http://ueditor.baidu.com/website/download.html 二.环境搭建. 具体可以参看http://fex.baidu.com/ ...

  7. seaJs组建库

    seaJs组建库的使用   原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以 ...

  8. OCP读书笔记(25) - 题库(ExamE)

    401.Which of the following are correct about block media recovery? (Choose all that apply.)A. Physic ...

  9. 模拟linux下的ls -l命令

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h&g ...

  10. Oracle 数据库 有用的sql语句

    ; SELECT to_date('2014-12-01', 'yyyy-mm-dd') + numtodsinterval(rownum , 'day') FROM DUAL CONNECT BY ...