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 ...
随机推荐
- echarts-案例
关系图 http://echarts.baidu.com/echarts2/doc/example/force1.html http://www.cnblogs.com/spring_wang/p/4 ...
- 怎么在MindManager中查看打印预览
在MindManager2016思维导图中打印导图之前,可以先进行预览,MindManager和其他很多应用程序一样都带有打印预览功能,该功能提供了再次检查的机会,避免打印出错,MindManager ...
- PHP 做文件校验,MD5,CRC32,SHA等
函数 hash_file(): 使用给定文件的内容生成哈希值 说明 string hash_file ( string $algo , string $filename [, bool $raw_ou ...
- oracle--第一天议--bai
第一天: 1 oracle的安装 a 卸载 b 安装服务器软件及数据库(orcl) --OracleServiceOrcl c 执行网络配置--配置监听1521,本地net服务名(创建1个外部连接的u ...
- GUI学习中错误Exception in thread "main" java.lang.NullPointerException
运行时出现错误:Exception in thread "main" java.lang.NullPointerException 该问题多半是由于用到的某个对象只进行了声明,而没 ...
- CSS-学习笔记三
绝对定位:1. 脱离了文档流,没有浮动效果2. 默认情况下,设置了绝对定位的块,它的Top,left是相对于浏览器的3. 当给设置了绝对定位的块的父元素设置定位的时候(绝对.相对.固定), 那么 ...
- PowerShell Notes
1. 概要 - PowerShell 是cmdlet(command-let)的指令集合,类似unix的bash. - IDE: Windows PowerShell ISE,不区分大小写,可以用命 ...
- 使用sublime一键格式化XML文件
1 sublime简介 sublime是一款代码编辑和阅读软件,体积小,运行快,界面非常简洁漂亮.官方地址:https://www.sublimetext.com/ 2 在sublime上安装插件 使 ...
- ActiveMQ中的Destination高级特性(一)
---------------------------------------------------------------------------------------- Destination ...
- python基础知识(三)
摘要:主要涉及新数据类型set集合.三元运算.深浅拷贝.函数基础.全局变量与局部变量 一.set --> 无序,不允许重复的集合 不允许重复的列表, 1,创建 s = set() 接收 ...