js实现文字左右滚动效果

最简单的文字向上滚动效果利用MARQUEE

 代码如下 复制代码

<MARQUEE onmouseover=this.stop() style="WIDTH: 100%; HEIGHT: 195px" onmouseout=this.start() scrollAmount=2 direction=up><a href="sys_clew1.jsp">1</a><br><a href="sys_clew2.jsp">2</a><br><a href="sys_clew3.jsp">3</a><br></MARQUEE>

上面的方法是我刚学程序时写的,下面百度一个不错的代码。

 

 代码如下 复制代码

<div id="dvvv" style="overflow: hidden; height: 27px; width: 750px;">
<div id="dvvv1">
<ul style="padding-left: 0px; margin-top: 0px;">
<li style="list-style-type: none;white-space:nowrap“>
滚动吧，不停的文字滚动吧。</li>。
</ul>
</div>
<div id="dvvv2">
</div>
</div>

<script type="text/javascript">
var speded=30
dvvv2.innerHTML=dvvv1.innerHTML
function Marqpuee(){
if(dvvv2.offsetWidth-dvvv.scrollLeft<=0)
dvvv.scrollLeft-=dvvv1.offsetWidth
else{
dvvv.scrollLeft++
}
}
var MyMmar=setInterval(Marqpuee,speded)
dvvv.onmouseover=function() {clearInterval(MyMmar)}
dvvv.onmouseout=function() {MyMmar=setInterval(Marqpuee,speded)}
</script>
时间： 2024-09-29 11:06:28

js实现文字左右滚动效果的相关文章

js图片文字时间间隔滚动效果代码

免费注册为会员后您可以 免费发布供求 企业网上推广 IM在线帮助 服务指南 免费注册会员 下载IG客户端 用户登陆 更多>>精彩企业专题 进入专题 广州市巨和机械专题 进入专题 中联重科企业专题 进入专题 徐工集团专题 c6手机主题下载 三一重工专题

JS+CSS3模拟溢出滚动效果_javascript技巧

移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到两个页面都有类似overflow:auto的效果,一般情况下通过css设置是可以实现的(虽说丑了点儿),,但是一旦overflow:auto的元素响应touch事件时就会有诸多不便,例如fullpage中某一元素自滑动,我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏,但是在元素滑动到最底部的时候也就不能响应下一屏事件,上滑也是一样,这时候就需要touch事件来响应,

js+div实现图片滚动效果代码

 本篇文章主要是对js+div实现图片滚动效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 横向  <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"    onmouseout="doscroll()">  <div id=&qu

jquery单行文字向上滚动效果示例

 这篇文章主要介绍了jquery实现的单行文字向上滚动效果,需要的朋友可以参考下 代码如下: <body>  <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div>    <div id="content" class="infocontent">  <div id="top" cla

分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee

JS简单实现无缝滚动效果实例_javascript技巧

本文实例讲述了JS简单实现无缝滚动效果.分享给大家供大家参考,具体如下: <!doctype html> <title>javascript无缝滚动</title> <meta charset="utf-8" /> <meta name="keywords" content="javascript无缝滚动" /> <meta name="description"

JS实现双击屏幕滚动效果代码_javascript技巧

本文实例讲述了JS实现双击屏幕滚动效果代码.分享给大家供大家参考,具体如下: 这里演示双击滚屏效果代码的实现方法,不知道有觉得有用处的没,现在网上还有很多还在用这个特效的呢,代码分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-db-click-src-scroll-style-codes/ 具体代码如下: <html> <SCRIPT language=JavaScript> var currentpos,ti

jquery实现多行文字图片滚动效果示例代码_jquery

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

一个jquery实现的不错的多行文字图片滚动效果_jquery

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars