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实现文字无缝移动效果的更多相关文章

  1. js div浮动层拖拽效果代码

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

  2. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  3. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 基于SVG.js实现网页初始化线条描绘效果

    前端实现看到一个网页的效果很cool(参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html),决定自己去实现以下这个效果 ...

  7. Vue.js大屏数字滚动翻转效果

    ================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

  8. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

  9. js div及table首行顶部吸附示例

    js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...

随机推荐

  1. bzoj1251

    1251: 序列终结者 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 3776  Solved: 1581[Submit][Status][Discu ...

  2. Android公共技术收集

    UML类图详解 详解Android主流框架不可或缺的基石(ClassLoader,泛型,反射,注解) 公共技术点之  Java注解Annotation 公共技术点之  Java反射Reflection ...

  3. css学习笔记(1)

    为什么要重新学css,理由有很多,css这个小婊砸,接触至今已有三年,但真的说熟练恐怕不见得.特此,为了我的目标,开始重新整理css的知识,我希望,每一篇笔记都能有个例子,从而来巩固我的知识. 在学习 ...

  4. angular服务二

    angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...

  5. Linux 建立文件夹的链接

    linux下的软链接类似于windows下的快捷方式 建立软链接 ln -s a b a 就是源文件,b是链接文件名,其作用是当进入b目录,实际上是链接进入了a目录 example:ln -s /ho ...

  6. 懵懂的js原型

    说起原型,就得提起函数,js中据说是这样定义的,每个函数都有一个prototype 属性,(这个属性啊,又是个对象).为了构造函数能复用,就引出了原型,要把共享的东西放到原型上去.例如 //构造函数, ...

  7. CocoaPods升级,升级以后出现bug的解决方法(升级必看!)

    命令行更新(安装)步骤[更新步骤] $ sudo gem update --system // 先更新gem,国内需要切换源 $ gem sources --remove https://rubyge ...

  8. 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 ...

  9. ASP.MVC时间类型json数据处理

    服务端返回DateTime属性如果用自带的json方法返回的数据如下: 有2种办法解决一种是采用服务端解决方案,一种是使用前端解决方案 1.前端解决方案 第一步:对Date进行扩展 // 对Date的 ...

  10. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...