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 ...
随机推荐
- ITIL十大流程
1.服务水平管理(Service Level Management):服务水平管理的目标是通过协调IT用户和提供者双方的观点,实现特定的.一致的.可测量的服务水平,以为客户节省成本.提高用户生产率. ...
- 事件DOMContentLoaded和load的区别
1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...
- 【原创】自己动手写工具----XSmartNote [Beta 1.0]
一.背景 有个朋友是在他们单位的市场部,手里的策划文案以及PPT,少则数百,多则上千,多年下来也是一笔不可小觑的财富,每一次新的策划都可以从以往的文案或PPT中“拿来主义”,有着很好的借鉴意义,但是这 ...
- JavaScript------获取url地址中的参数
$(document).ready(function () { //获取地址中的参数(name是字符串) function getParameter(name) { //正则表达式 var reg = ...
- 远程访问jupyter notebook
远程访问Jupyter Notebook Jupyter Notebook很好用,但是直接远程在服务器上用体验当然不如本地计算机好,那么如何远程访问呢? 首先需要在服务器上安装好ipython, ju ...
- 美国usan数据库——PDF提取
QQ:231469242 原创 单个PDF内容提取 # -*- coding: utf-8 -*- """ io.open() is the preferred, hig ...
- 安装LNMP(Nginx+Mysql+PHP)
1:安装nginxyum install -y gcc pcre-devel openssl-develwget http://www.nginx.org/download/nginx-1.4.2.t ...
- MySQL安装与设置
下载zip,配置 1,系统变量添加:...\mysql-5.7.10-winx64,环境变量添加:%MYSQL_HOME%\bin 2,修改MySQL.ini basedir=(同系统变量路径) da ...
- CSS背景background、background-position使用详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- 常用linux 命令 -字符串相关
参考网络文章,个人工作总结 题记:一般对字符串的操作有以下几种:求长度,截取字符串,拼接字符串,找字符串中某个字符的索引 1 expr 命令 1.1 定义 man 手册 Print the value ...