`
sbl2255
  • 浏览: 218518 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js简单滚动

 
阅读更多
<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简单判断滚动条的滚动方向实现方法

    本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考,具体如下: 以下代码实现判断页面的滚动条的滚动方向; var sign = 80;//定义默认的向上滚与向下滚的边界 [removed] = [removed] = ...

    JS控制滚动条自动向下滚动

    在JavaScript(JS)编程中,控制滚动条自动向下滚动是一种常见的需求,特别是在实时聊天、论坛或者日志更新等场景中,我们希望用户能够始终保持看到最新的内容。本篇将详细讲解如何利用JavaScript实现这一功能,以及...

    简单JS随滚动条滚动导航

    【标题】"简单JS随滚动条滚动导航"所涉及的知识点主要集中在JavaScript的事件监听、DOM操作以及CSS样式实现上。这种类型的导航栏通常用于网页设计中,它能随着用户滚动页面而改变位置,始终保持在可见区域,为用户...

    js无缝滚动demo

    本示例将探讨如何使用原生JavaScript来实现一个简单的无缝滚动效果。 首先,我们需要理解无缝滚动的基本原理。无缝滚动通常是通过在视口顶部或底部自动加载新的内容,模拟无限滚动的效果。这可以通过监听滚动事件,...

    js文字滚动制作js scroll单排文字滚动向上间歇滚动

    在这个场景中,"js文字滚动制作js scroll单排文字滚动向上间歇滚动"涉及到的是使用JavaScript实现一种常见的网页特效——文字滚动。 文字滚动是一种常见的网页动态效果,它可以使页面上的文本按照设定的方向(如...

    JS最简单的滚动新闻,兼容IE6及其他主流浏览器

    在这个项目中,我们关注的是一个简单的JS滚动新闻实现,它不仅支持早期的Internet Explorer 6(IE6),还兼容其他主流的现代浏览器。 在Web开发中,滚动新闻是一种常见的功能,它能够在页面上动态展示新闻标题或...

    js滚动条美化

    本主题将探讨如何利用JavaScript(JS)和CSS来美化滚动条,使其与网站的整体设计更加协调,提升用户体验。 首先,我们需要了解CSS在滚动条美化中的作用。CSS3引入了`::-webkit-scrollbar`和`::-webkit-scrollbar-...

    js获取滚动距离的方法

    在介绍JavaScript获取滚动距离的方法时,首先要了解的是页面滚动条的机制和页面布局相关的一些基本概念。在Web开发中,页面的滚动一般指的是当页面内容超出了视窗(视图区域)的大小时,用户可以使用滚动条来查看未...

    几种js文字滚动(滚动 新闻)代码共享

    1. **CSS动画**:虽然不是纯JavaScript方法,但可以结合CSS3的`keyframes`和`animation`属性实现简单的滚动效果。这种方式适用于支持CSS3的现代浏览器。 2. **定时器(setTimeout或setInterval)**:JavaScript的...

    简单原生js文字向上滚动消息框代码

    这个"简单原生js文字向上滚动消息框代码"提供了一种实现方式,它不依赖于任何JavaScript库如jQuery,而是完全基于原生JavaScript编写,这使得它在性能和加载速度上具有优势。 首先,`index.html`是网页的主文件,它...

    JS数字滚动效果

    本文将深入探讨如何利用JavaScript实现简单的数字滚动效果,并适合初学者学习。 首先,我们需要理解基本的JavaScript语法和DOM操作。JavaScript是一种脚本语言,它可以在网页上运行,用于处理和控制网页内容。DOM...

    js 上下(左右)图片滚动

    "js 上下(左右)图片滚动"就是一种常见的动态展示技术,它利用JavaScript实现图片的自动滚动,为网站增添活力。在这个主题中,我们将深入探讨如何利用JavaScript实现图片的上下滚动和左右滚动效果。 首先,我们要...

    JS滚动条属性值

    JS滚动条属性值,取得滚动条各种数据值,简单处理JS操作滚动条

    js放大产品图片加滚动加左侧

    对于新手开发者,可以使用现成的库,如`zoom.js`或`jquery.zoom`等,它们已经封装好了图片放大和滚动的逻辑,只需要简单的配置即可使用。对于有经验的开发者,可以自己编写代码,这样可以更好地定制功能和优化性能。...

    js文字间隔滚动上下滚动

    在探讨“js文字间隔滚动上下滚动”的知识点时,我们深入分析了如何利用JavaScript结合jQuery库实现文本元素的动态上下滚动效果。这一技术在网站设计、新闻滚动条、公告栏等场景中极为常见,能有效提升用户体验,使得...

    JS无间隔滚动代码,javascript,marquee

    以下是一个简单的无间隔滚动的JavaScript实现示例: ```javascript // 获取需要滚动的元素 var scrollElement = document.getElementById('scrollingContent'); // 设置初始位置 var position = 0; // 定义滚动...

    js图片滚动

    6. **库和框架**:虽然纯JavaScript可以实现图片滚动,但有些库如jQuery、React或Vue提供了更方便的方法和插件,如`swiper.js`或` Owl Carousel`,它们封装了复杂的动画逻辑,让开发者能快速实现图片滚动功能。...

    JS图片滚动代码.循环滚动

    ### JS图片滚动代码:循环滚动 #### 知识点概览 1. **HTML与CSS基础** - 基本HTML结构 - CSS样式设置 2. **JavaScript实现图片滚动** - DOM操作 - JavaScript定时器 - 事件监听 3. **动态内容加载** - 使用...

    js实现单行文字滚动

    在本文中,我们将深入探讨如何使用JavaScript实现单行文字的滚动效果,这是一种常见的动态显示信息的方式,尤其适用于有限的空间展示大量文本。 首先,我们需要理解基本的HTML结构,因为JavaScript通常与HTML和CSS...

Global site tag (gtag.js) - Google Analytics