marquee实现文字移动效果;js+div实现文字无缝移动效果
1.marquee实现文字移动:
<marquee width="220px;" scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()" >
<p style="letter-spacing:2px;width: 1px;">
欢迎您登录拜博医疗口腔集团内部网
</p>
</marquee>
2.js+div实现文字无缝平滑移动:
<p id="scrollobj" style="white-space:nowrap;overflow:hidden;width:400px;margin: auto;" onmouseover="stop()" onmouseout="start()"><span style="padding-left: 210px;">欢迎您登录拜博医疗口腔集团内部网</span></p> <script>
function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
}
var a = setInterval("scroll(document.getElementById('scrollobj'))",20);
function stop(){
clearInterval(a);
}
function start(){
a=setInterval("scroll(document.getElementById('scrollobj'))",30);
}
</script>
marquee实现文字移动效果;js+div实现文字无缝移动效果的更多相关文章
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 基于SVG.js实现网页初始化线条描绘效果
前端实现看到一个网页的效果很cool(参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html),决定自己去实现以下这个效果 ...
- Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
- 极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
- js div及table首行顶部吸附示例
js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...
随机推荐
- bzoj1251
1251: 序列终结者 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 3776 Solved: 1581[Submit][Status][Discu ...
- Android公共技术收集
UML类图详解 详解Android主流框架不可或缺的基石(ClassLoader,泛型,反射,注解) 公共技术点之 Java注解Annotation 公共技术点之 Java反射Reflection ...
- css学习笔记(1)
为什么要重新学css,理由有很多,css这个小婊砸,接触至今已有三年,但真的说熟练恐怕不见得.特此,为了我的目标,开始重新整理css的知识,我希望,每一篇笔记都能有个例子,从而来巩固我的知识. 在学习 ...
- angular服务二
angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...
- Linux 建立文件夹的链接
linux下的软链接类似于windows下的快捷方式 建立软链接 ln -s a b a 就是源文件,b是链接文件名,其作用是当进入b目录,实际上是链接进入了a目录 example:ln -s /ho ...
- 懵懂的js原型
说起原型,就得提起函数,js中据说是这样定义的,每个函数都有一个prototype 属性,(这个属性啊,又是个对象).为了构造函数能复用,就引出了原型,要把共享的东西放到原型上去.例如 //构造函数, ...
- CocoaPods升级,升级以后出现bug的解决方法(升级必看!)
命令行更新(安装)步骤[更新步骤] $ sudo gem update --system // 先更新gem,国内需要切换源 $ gem sources --remove https://rubyge ...
- Généralement c'est un mélange qui me devient personnellement
Parmi mes plus grands problèmes personnels avec maisons de rue conventionnelles est en fait ils sont ...
- ASP.MVC时间类型json数据处理
服务端返回DateTime属性如果用自带的json方法返回的数据如下: 有2种办法解决一种是采用服务端解决方案,一种是使用前端解决方案 1.前端解决方案 第一步:对Date进行扩展 // 对Date的 ...
- 为什么margin-top不是作用于父元素【margin外边距合并问题】
coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...