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 ...
随机推荐
- PHP 扩展开发(将自己的一些代码封装成PHP扩展函数)
今天时间不多,先给个地址,能搜到我这篇blog的朋友先看看我最近在看的一些文章.资料吧: 我的环境是 lnmp1.1 的 (LNMP一键安装包),所以要进行PHP扩展开发首先应该对环境配置和shell ...
- 精选30道Java笔试题解答
转自:http://www.cnblogs.com/lanxuezaipiao/p/3371224.html 都 是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我 ...
- WebAPI IIS PUT和DELETE请求失败 405
IIS拒绝PUT和DELETE请求是由于IIS为网站默认注册的一个名为WebDAVModule的自定义HttpModule导致的,如果我们的站点不需要提供针对WebDAV的支持,解决这个问题最为直接的 ...
- 学习Struts2的第一个应用步骤
---恢复内容开始--- 一.在官网 http://struts.apache.org/下载struts-2.3.31-all 1. 打开struts-2.3.31-all,将struts-2.3. ...
- VS2015插件
这里记录一下,VS2015使用的插件和具体用法链接 Refactoring Essentils:代码重构分析 http://vsrefactoringessentials.com/ 可以使用 取消 R ...
- console 输出信息美化
不久前在一些前端的网站上看到的效果,以前觉得console只是拿来做做调试,不过现在看到别人网站的console美化效果,这个还可以作为一种网站个性来显示的.. 以%c开头,后面的文字就打印的信息,后 ...
- 如果mac电脑的usb转接器连接wlan时不显示,也就是不识别usb此时的网络连接没有,解决办法就是如下
1.接上电源 关机 先按下shift +ctrl + opt + 开机键 ,等待10秒,这10秒是没有反应的,屏幕不会亮,系统不会跑起来, 10秒之后松开所有键,再按下opt + cmd ...
- JavaScript的Dom操作
两个练习: 1.两个表单里面的数据相互移动: <style type="text/css"> select { width: 100px; position: rela ...
- 12月8日phpcms添加子栏目后的读取
一个栏目下面如果没有子栏目,那么它调用的模板就是列表页模板(及list_为前缀的模板):如果一个栏目下面有子栏目,那么它调用的就是栏目首页模板(category_为前缀的模板). 所以,当你这个栏目添 ...
- laydate兼容bootstrap
因为Bootstrap使用了 * {box-sizing:border-box;}来reset浏览器的默认盒子模型.所以加上以下代码就可以兼容Bootstrap了 <style type=&qu ...