js实现文字横向滚动
页面布局
<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实现文字横向滚动的更多相关文章
- jQuery实现文字横向滚动效果
HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...
- js实现文字上下滚动效果
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- js实现文字上下滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 文字横向滚动marquee
<div style="width:200px; height:300px"> <marquee behavior="scroll" cont ...
- js实现文字字幕滚动
<div class="dggd_r" id="h" style="height:400px;overflow:hidden;display:i ...
- 利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)
首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...
随机推荐
- Python脚本传參和Python中调用mysqldump
Python脚本传參和Python中调用mysqldump<pre name="code" class="python">#coding=utf-8 ...
- “jquery于each方法和选择”学习笔记
<head> <title></title> <script src="jquery-1.4.2.js" type="text/ ...
- 编程算法基地-2.1利用字符串API
2.1利用字符串API 字符串是Java类型最常用.并且是复合类型 串非常经常用于,其最佳API熟悉文档. 推断串中有没有反复的字符 String s ="abcdebxyz"; ...
- PL/SQL Developer下设置“长SQL自己主动换行”
***********************************************声明*************************************************** ...
- vs2013 ADO联系SQL server2012数据库
平时,给定ADO例如使用以下过程数据源中的数据的数据库应用程序 (1) 创建一个Connection 物.定义的连接字符串信息.它包含了数据源名称.用户ID.密码.连接超时 . 默认数据库的位置和光标 ...
- Hadoop2.3.0具体安装过程
前言: Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS.HDFS有高容错性的特点,并且设计用来部署在低廉的(low-co ...
- iOS6和iOS7适应代码(6) —— NSLocalizedString
我们的应用程序都需要国际化,字符串的重要组成部分.一般来说.我们是通过一个string资源文件来达到这个目的,我们需要支持多国语言,有多少次把这个文档本地化.需要使用的代码NSLocalizedStr ...
- poj 2565 Ants (KM+思维)
Ants Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 4125 Accepted: 1258 Special Ju ...
- Cocos2d-3x:vs2012项目开关android项目需要注意的地方
http://www.cocoachina.com/bbs/read.php?tid=194668 先依照这个文章导入库到vs项目. 在vs项目的sceen类的里加入 #include "c ...
- 网络资源(1) - Hadoop视频
2014_08_23: hadoop03c_分布式文件系统HDFS http://v.youku.com/v_show/id_XNDgwNjg1OTY0.html?f=18604686 2014_08 ...