div内实现文字左右循环滚动

2019独角兽企业重金招聘Python工程师标准>>>

<!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=gb2312" />
<title>文字无缝滚动可添加多个DIV</title>
<script>
(function(ns){  function Scroll(element){var content = document.createElement("div");var container = document.createElement("div");var _this =this;var cssText = "position: absolute; visibility:hidden; left:0; white-space:nowrap;";this.element = element; this.contentWidth = 0;this.stop = false;content.innerHTML = element.innerHTML;//获取元素真实宽度content.style.cssText = cssText;element.appendChild(content);this.contentWidth = content.offsetWidth;content.style.cssText= "float:left;";container.style.cssText = "width: " + (this.contentWidth*2) + "px; overflow:hidden";container.appendChild(content);container.appendChild(content.cloneNode(true));element.innerHTML = "";element.appendChild(container);container.onmouseover = function(e){clearInterval(_this.timer);};container.onmouseout = function(e){_this.timer = setInterval(function(){ _this.run();},20);          };_this.timer = setInterval(function(){ _this.run();}, 20);}Scroll.prototype = {run: function(){var _this = this;var element = _this.element;element.scrollLeft = element.scrollLeft + 1;if(element.scrollLeft >=  this.contentWidth ) {element.scrollLeft = 0;}}};ns.Scroll = Scroll;
}(window));
window.onload=function(){var sc = new Scroll(document.getElementById("scroll"));var sc = new Scroll(document.getElementById("scroll2"));
}
</script>
</head><body>
<div id="scroll" style="width:500px;border:1px solid #f60;color:red;overflow:hidden;">文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果</div>
<br />
<div id="scroll2" style="width:500px;border:1px solid #060;color:006;overflow:hidden;">文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果</div>
</body>
</html>

简单的例子就不需要解释什么了。

转载于:https://my.oschina.net/kingchen8080/blog/605758

div内实现文字左右循环滚动相关推荐

msclass 文字滚动_文字无缝循环滚动（标题向上滚动）
要写一个标题滚动的效果,开始以为挺简单用marquee就行了呢.用了才知道,它总是要等一次滚动后再循环,所以很不好看.才知道只有用js了. 在网上找了一个js感觉挺好的. ============== ...
java把字体做成滚动的_Scroll text - JS实现文字自动循环滚动效果
//scrollBodyId: String 内部滚动div的id //scrollBoxId: String 外面限制div的id //showHeight: Int 限制显示高度 //sho ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
html滚动字幕循环,H5 div文字循环滚动
实际上也叫跑马灯.说起跑马灯这个词,还是去年或前年写iOS时候用到的呢,不知道是哪位前辈兴得这个词儿.在h5里俗点儿说就是,使用一个div做容器,让里面的文字水平轮番播放. 之前在oc内都是使用第三方 ...
文字/图片向上无限循环滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js文字无限循环向上滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Table表格文字超出后循环滚动的动画实现方案核心逻辑
需求前几天公司要求做一个动态表格:大概就是可配置的(颜色,字体,行数等等),用作屏幕展示.因此就要求表格文字在超出宽度时候可以有动画循环滚动展示内容.大概这个样子: 项目使用vue框架,动画因为涉及 ...
jquery文字循环滚动播报实现
题引需要实现一个从右往左,文字循环滚动播报的功能工具:jquery 演示地址1(这个慢) 演示地址2(点这个) 思路 <div id="barrageInfo">& ...

div内实现文字左右循环滚动

div内实现文字左右循环滚动相关推荐

最新文章

热门文章