`

图片跑马灯不连续的问题解析

 
阅读更多

了解示例以前,先普及几个名词:

offsetWidth:offsetWidth = width + padding + border;

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离;

setInterval:有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码.

原理:每隔设定的时间后,id为demo的div向左移动1个px(scrollLeft++),当移动的长度等于id为demo1的 offsetWidth时,相当于整个id为demo1的div全部隐藏,这时我们看到的其实是demo2,此时将demo的scrollLeft恢复为 初始值,demo1重新向左移动,以此往复。

注:demo1的offsetWidth > demo的offsetWidth,此为关键点 。否则就会出现,往左移动到demo2的最后一张图片出来后就卡住不动的情况。

<div align="center" id="demo">
<div id="demo1">

<img src="xxx.jpg">

<img src="xxx.jpg">

<img src="xxx.jpg">

<img src="xxx.jpg">

<img src="xxx.jpg">

<img src="xxx.jpg">

</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed = 10; //滚动速度值,值越大速度越慢
demo2.innerHTML = demo1.innerHTML;//克隆demo2为demo1

function Marquee(){
        if(demo2.offsetWidth-demo.scrollLeft<=0){
            demo.scrollLeft-=demo1.offsetWidth;
        }else{
            demo.scrollLeft++;
           
        }
    }


var MyMar = setInterval(Marquee, speed); //设置定时器
demo.onmouseover = function() {
 clearInterval(MyMar);
} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function() {
 MyMar = setInterval(Marquee, speed);
} //鼠标移开时重设定时器
-->
</script>

分享到:
评论

相关推荐

    Android应用源码之ImageView 图片循环跑马灯的效果_跑马灯.zip

    在这个项目中,我们将会深入解析如何利用Android的ImageView和相关API来创建一个类似跑马灯的效果。下面将详细阐述实现这个功能的关键知识点。 1. **线性布局(LinearLayout)**:跑马灯的基础布局通常是一个水平...

    图片文字无限循环跑马灯

    跑马灯效果是一种常见的动态视觉展示方式,常用于滚动显示文字、图片或其它信息,尤其在网站、APP和数字显示屏中应用广泛。这种效果能够在一个有限的空间内展示大量的信息,而且由于其滚动的方式,可以吸引用户的...

    HTML跑马灯

    ### HTML跑马灯知识点解析 #### 一、HTML跑马灯概述 HTML跑马灯是一种在网页上实现文字或图片滚动显示效果的技术。通过使用`&lt;marquee&gt;`标签及其属性,可以轻松创建出动态的跑马灯效果。跑马灯在早期网页设计中较为...

    Android ImageView图片循环跑马灯效果源码

    跑马灯效果通常指的是图片在水平或垂直方向上连续滚动展示,给人一种动态循环的感觉,类似于电子广告牌的效果。在本案例中,我们将深入探讨如何通过源码实现这一功能。 首先,我们需要了解的是Android中的ImageView...

    自定义垂直跑马灯LinearLayout

    "自定义垂直跑马灯LinearLayout"是一个自定义布局组件,它扩展了Android原生的LinearLayout,并在其基础上实现了文字或图片沿垂直方向循环滚动的效果,类似于常见的广告轮播或者通知提示。这个自定义布局通常用于...

    广工EDA跑马灯Verilog设计.rar

    5. 设计报告:Word文档通常包含设计报告,详细阐述了设计思路、实现过程、Verilog代码解析、仿真结果分析以及可能的问题和改进方案。设计报告是评估项目完成度和理解深度的重要依据。 6. 效果截图:这部分内容通常...

    Android 跑马灯

    在这个案例中,可能包含跑马灯效果相关的图片资源或者样式文件。 - **src**:源代码文件夹,通常包含Java或Kotlin代码,这里的源码应包含了实现跑马灯效果的类或组件。 综上所述,Android跑马灯的实现涉及到了...

    iOS 实例跑马灯

    在iOS开发中,跑马灯效果通常指的是文字或图片在界面上不断滚动显示的效果,类似于传统的电子显示屏。这种效果能够有效地利用有限的空间展示更多的信息,是很多应用界面设计中的常见元素。本实例“iOS 实例跑马灯”...

    Android应用源码之ImageView 图片循环跑马灯的效果-IT计算机-毕业设计.zip

    3. 效果评估:分析实现的跑马灯效果对用户体验的影响,可能的优点和改进之处。 4. 拓展性讨论:探讨该功能的可扩展性,比如如何支持动态添加图片、如何优化性能等。 通过以上内容,我们可以看到,实现Android应用中...

    Android高级应用源码-跑马灯效果.zip

    在Android开发中,跑马灯效果通常指的是文字或者图片在界面上不断滚动的效果,这种效果在许多应用的标题栏、通知栏或者广告横幅中常见。这个"Android高级应用源码-跑马灯效果.zip"文件很可能是提供了一个实现此类...

    项目引用falsh 网站跑马灯

    1. **创建Flash元件**:首先在Flash环境中创建一个动画元件,可以是文本或图片,然后设置动画循环播放,即跑马灯的效果。 2. **ActionScript编程**:使用ActionScript编写控制元件滚动的代码,包括速度、方向、暂停...

    JS世界杯抽奖(翻牌,抽牌,跑马灯)效果

    描述中提到跑马灯效果有问题,可能是指文字滚动不平滑、超出边界或未按预期方向移动。 为了实现这些效果,开发者需要对HTML结构、CSS样式以及JavaScript事件处理有深入理解。同时,压缩包中的“图片发暗转”可能指...

    跑马灯效果大全

    ### 跑马灯效果大全知识点解析 #### 一、跑马灯效果概述 跑马灯效果是指在网页上文字或图像沿着特定路径移动的一种视觉效果。这种效果常见于网站的横幅广告、新闻滚动条等场景,可以吸引用户的注意力,增加页面的...

    JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)

    跑马灯效果通常指的是文字或图片在一定区域内循环滚动,营造出动态视觉效果。本实例将探讨如何使用JavaScript来实现这一功能,并进行代码解析与优化。 首先,跑马灯抽奖的核心在于利用JavaScript控制DOM元素的样式...

    js跑马灯代码(自写)

    跑马灯效果通常指的是在网页上使一段文字或图片连续滚动显示,就像屏幕上的字幕一样。在这个程序中,开发者提供了一个自定义的JavaScript函数`cls_marquee`,用来实现滚动文本的效果。这个函数的参数包括了三个ID和...

    解决Vue的项目使用Element ui 走马灯无法实现的问题

    解决 Vue 项目中使用 Element UI 走马灯无法实现的问题,关键在于理解 webpack 的模块解析机制和 Element UI 走马灯组件的属性。通过正确地引用图片资源并动态调整走马灯高度,可以实现一个既美观又功能完善的走马灯...

    霓虹灯效果

    5. **交互性**:为了让用户体验更佳,可以添加交互功能,如鼠标悬停时霓虹灯亮起或改变颜色,点击后启动跑马灯效果等。这需要JavaScript来监听用户事件并执行相应的操作。 6. **性能优化**:在实现霓虹灯效果时,...

    Android走马灯学校活动界面超链实验报告.docx

    4. **布局调整**:实验过程中,通过调整布局解决了图片环绕文本的问题,这加深了对Android布局管理的理解,如LinearLayout、RelativeLayout或ConstraintLayout的运用。 5. **事件处理**:为了实现电话、邮件和地图...

    苹果CMS超级播放器专业版V1.0.8无授权全开源.zip

    跑马灯公告 播放器LOGO 时间显示 电量显示 标题显示 字幕功能 弹幕功能 选集列表 下一集 自动下一集 播放记录 加载画面 画中画 锁屏 视频旋转 移动端自动横屏 资源地址加密 注意问题: 1.不兼容IE浏览器 2.php版本...

    苹果CMS超级播放器专业版V1.0.8无授权全开源

    跑马灯公告 播放器LOGO 时间显示 电量显示 标题显示 字幕功能 弹幕功能 选集列表 下一集 自动下一集 播放记录 加载画面 画中画 锁屏 视频旋转 移动端自动横屏 资源地址加密 注意问题: 1.不兼容IE浏览器 2.php版本...

Global site tag (gtag.js) - Google Analytics