<div id="gegz"> <!--gegz开始处-->
<h3>广而告之<span><a href="/sites/tv/list/qhdst_list.htm?columnid=5803">更多>></a></span></h3>
<div id="demo" style="overflow:hidden;height:100px;">
<div id="demo1">
<ul style="list-style:none">
<li><a href="/publish/tv/5803/2010/20101222124533653664144/20101222124533653664144_.html" title="55555">55555</a></li>
<li><a href="/publish/tv/5803/2010/20101222105117526638419/20101222105117526638419_.html" title="444444444">444444444</a></li>
<li><a href="/publish/tv/5803/2010/20101222105106842292389/20101222105106842292389_.html" title="333333333">333333333</a></li>
<li><a href="/publish/tv/5803/2010/20101222105056780535381/20101222105056780535381_.html" title="22222222">22222222</a></li>
<li><a href="/publish/tv/5803/2010/20101222105045634893481/20101222105045634893481_.html" title="11111111111">11111111111</a></li>
</ul>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
<p class="lr_bottom"></p>
</div>
########################################
实现思路:两个一样的DIV,通过改变demo的scrolltop来实现连续滚动
offsetHeight: 对象的实际大小,而width表示对象的百分比
scrolltop: 对象对窗口的上端的距离
.....(其他同理)
分享到:
相关推荐
本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考,具体如下: 以下代码实现判断页面的滚动条的滚动方向; var sign = 80;//定义默认的向上滚与向下滚的边界 [removed] = [removed] = ...
在JavaScript(JS)编程中,控制滚动条自动向下滚动是一种常见的需求,特别是在实时聊天、论坛或者日志更新等场景中,我们希望用户能够始终保持看到最新的内容。本篇将详细讲解如何利用JavaScript实现这一功能,以及...
【标题】"简单JS随滚动条滚动导航"所涉及的知识点主要集中在JavaScript的事件监听、DOM操作以及CSS样式实现上。这种类型的导航栏通常用于网页设计中,它能随着用户滚动页面而改变位置,始终保持在可见区域,为用户...
本示例将探讨如何使用原生JavaScript来实现一个简单的无缝滚动效果。 首先,我们需要理解无缝滚动的基本原理。无缝滚动通常是通过在视口顶部或底部自动加载新的内容,模拟无限滚动的效果。这可以通过监听滚动事件,...
在这个场景中,"js文字滚动制作js scroll单排文字滚动向上间歇滚动"涉及到的是使用JavaScript实现一种常见的网页特效——文字滚动。 文字滚动是一种常见的网页动态效果,它可以使页面上的文本按照设定的方向(如...
在这个项目中,我们关注的是一个简单的JS滚动新闻实现,它不仅支持早期的Internet Explorer 6(IE6),还兼容其他主流的现代浏览器。 在Web开发中,滚动新闻是一种常见的功能,它能够在页面上动态展示新闻标题或...
本主题将探讨如何利用JavaScript(JS)和CSS来美化滚动条,使其与网站的整体设计更加协调,提升用户体验。 首先,我们需要了解CSS在滚动条美化中的作用。CSS3引入了`::-webkit-scrollbar`和`::-webkit-scrollbar-...
在介绍JavaScript获取滚动距离的方法时,首先要了解的是页面滚动条的机制和页面布局相关的一些基本概念。在Web开发中,页面的滚动一般指的是当页面内容超出了视窗(视图区域)的大小时,用户可以使用滚动条来查看未...
1. **CSS动画**:虽然不是纯JavaScript方法,但可以结合CSS3的`keyframes`和`animation`属性实现简单的滚动效果。这种方式适用于支持CSS3的现代浏览器。 2. **定时器(setTimeout或setInterval)**:JavaScript的...
这个"简单原生js文字向上滚动消息框代码"提供了一种实现方式,它不依赖于任何JavaScript库如jQuery,而是完全基于原生JavaScript编写,这使得它在性能和加载速度上具有优势。 首先,`index.html`是网页的主文件,它...
本文将深入探讨如何利用JavaScript实现简单的数字滚动效果,并适合初学者学习。 首先,我们需要理解基本的JavaScript语法和DOM操作。JavaScript是一种脚本语言,它可以在网页上运行,用于处理和控制网页内容。DOM...
"js 上下(左右)图片滚动"就是一种常见的动态展示技术,它利用JavaScript实现图片的自动滚动,为网站增添活力。在这个主题中,我们将深入探讨如何利用JavaScript实现图片的上下滚动和左右滚动效果。 首先,我们要...
JS滚动条属性值,取得滚动条各种数据值,简单处理JS操作滚动条
对于新手开发者,可以使用现成的库,如`zoom.js`或`jquery.zoom`等,它们已经封装好了图片放大和滚动的逻辑,只需要简单的配置即可使用。对于有经验的开发者,可以自己编写代码,这样可以更好地定制功能和优化性能。...
在探讨“js文字间隔滚动上下滚动”的知识点时,我们深入分析了如何利用JavaScript结合jQuery库实现文本元素的动态上下滚动效果。这一技术在网站设计、新闻滚动条、公告栏等场景中极为常见,能有效提升用户体验,使得...
以下是一个简单的无间隔滚动的JavaScript实现示例: ```javascript // 获取需要滚动的元素 var scrollElement = document.getElementById('scrollingContent'); // 设置初始位置 var position = 0; // 定义滚动...
6. **库和框架**:虽然纯JavaScript可以实现图片滚动,但有些库如jQuery、React或Vue提供了更方便的方法和插件,如`swiper.js`或` Owl Carousel`,它们封装了复杂的动画逻辑,让开发者能快速实现图片滚动功能。...
### JS图片滚动代码:循环滚动 #### 知识点概览 1. **HTML与CSS基础** - 基本HTML结构 - CSS样式设置 2. **JavaScript实现图片滚动** - DOM操作 - JavaScript定时器 - 事件监听 3. **动态内容加载** - 使用...
在本文中,我们将深入探讨如何使用JavaScript实现单行文字的滚动效果,这是一种常见的动态显示信息的方式,尤其适用于有限的空间展示大量文本。 首先,我们需要理解基本的HTML结构,因为JavaScript通常与HTML和CSS...