本来想用
marquee来做一个跑马灯的效果。但是一想到
marquee
开始的时候总会有一段空白,就想到网上下一个一上来就填满整个容器的
js
跑马灯效果。我从网上直接下了一段
html
代码,嵌进了我的代码里,但是总是没有效果。我胡乱地改了
css
和
style
但是始终图片动也不动,我也不知道哪里出了问题。我搞了好久好久,于是狠下心来,开始看代码,打算自己把原理搞懂,把效果修复了。弄了一会儿,我就把效果恢复了。于是我把代码贴出来。原来的代码是用的表格布局的,现在我统一改成
div
布局。想说一句,把原理搞懂才是王道。
<div id="wall_images">
<div id="wall_images_wrap">
<div id="wall_images1">
<img src="<{$xoops_url}>/images/marquee/1.jpg"/><img src="<{$xoops_url}>/images/marquee/2.jpg"/><img src="<{$xoops_url}>/images/marquee/3.jpg"/><img src="<{$xoops_url}>/images/marquee/4.jpg"/><img src="<{$xoops_url}>/images/marquee/5.jpg"/><img src="<{$xoops_url}>/images/marquee/6.jpg"/><img src="<{$xoops_url}>/images/marquee/7.jpg"/>
</div>
<div id="wall_images2">
</div>
</div>
</div>
对应的css为
<style>
#wall_images {
overflow: hidden;
height: 150px;
width: 670px;
}
#wall_images img {
margin: 0 5px 0 5px;
height: 150px;
}
#wall_images1, #wall_images2 {
display: inline-block;
}
#wall_images_wrap {
width: 4000px;
}
</style>
$(function(){
var speed = 30
var wall_images2=document.getElementById("wall_images2");
var wall_images=document.getElementById("wall_images");
var wall_images1=document.getElementById("wall_images1");
wall_images2.innerHTML = wall_images1.innerHTML
wall_images1.scrollLeft = wall_images.scrollWidth
function Marquee() {
if (wall_images.scrollLeft <= 0)
wall_images.scrollLeft += wall_images2.offsetWidth
else {
wall_images.scrollLeft--
}
}
var MyMar = setInterval(Marquee, speed)
wall_images.onmouseover = function() {
clearInterval(MyMar)
}
wall_images.onmouseout = function() {
MyMar = setInterval(Marquee, speed)
}
})
这个走马灯的原理很好懂,只要你把#wall_images的overflow变成scroll就可以明白。就是利用两张图并排滚动交替实现的。这里#wall_images_wrap 的width: 4000px;很关键。只有这样,才能够有足够的宽度来容纳相同的两拍图片在同一行。#wall_images为一个相框,先固定width和height将超出其容器范围内的图片都hide掉。下一层的#wall_images_wrap因为宽度太大,肯定是撑开容器的,这也是我们期望的。这里的4000px是我们硬编码的,当然也可以用js根据img的数量和大小来动态定义。
这里还要说,img默认的是inline布局,这里把#wall_images1和#wall_images2设成inline-block。这里把它们看做内联元素之后,那么div就不会一下子占满100%的width。而是作为内联元素一样老老实实的该多大就多大。所以这里#wall_images1和#wall_images2都很长,并且等长,不会占满100%的width。
而这里如果把inline-block改成inline也是可以工作的。如果你改成inline,就不能利用盒模型来修饰div了。这里我们没有牵扯到盒模型。所以两个长长的div也可以并排滚动。
或者也可以这样,让#wall_images1和#wall_images的float:left,其他不变。还是block的div。我本来以为div还是会占满100%的width,但是发现没有。Div竟然老老实实的该是多长就是多长。也许这就是float的特性,把块级元素默认占100%的特性消除掉了。这里也可以由有效果的。
这里还要说明一点,只要#wall_images_wrap的width比两个div理论上的两倍多就可以了,多多少无所谓,你用scroll试一下就知道了。
分享到:
相关推荐
drawMarqueeView.add(contentView: WQScrollLabel.createLabel(text: "我是跑马灯文字我是跑马灯文字我是跑马灯文字我是跑马灯文字", textColor: .cyan)) 3、开始跑 drawMarqueeView.startAnimation() 3、暂停 ...
STM32 跑马灯程序,简单的GPIO口定义。简单实现
库函数版本: 1、硬件连接。 查看原理图,选择io口。选择GPIO输出方式:推挽输出(可以真正的输出高低电平) 2、函数编写。...②初始化IO口模式。调用函数GPIO—Init() ③操作IO口,输出高低电平。
在一个有移位寄存器的while循环里,为移位寄存器加上n个输入,初始值都是F。只有最下面的一个输入是T,并且把这个输入连接到右边。while循环里面每个输入都接一个灯。
vue初始化的空白项目
指示灯从第一个依次亮到最后一个,再从最后一个依次亮到第一个,如此循环下去。每个灯明暗时间初始值为0.5秒,通过A键可以延长明暗时间、B键减少明暗时间
51单片机的跑马灯例程,适合于单片机初学
下面是一个使用标准库实现的跑马灯示例,它将使用标准库的printf函数输出调试信息,并且使用GPIO口控制一个LED的亮灭状态实现跑马灯效果。 1. 首先,在代码中定义LED引脚对应的GPIO口和引脚号: ``` #define LED_...
/// 初始化“跑马灯”视图方法 /// /// - Parameters: /// - frame: 视图大小 /// - content: “跑马灯”内容 /// - contentTextFont: “跑马灯”内容字体大小 /// - isContentCenter: 是否居中 /// - timeInterval:...
机器人竞赛跑马灯使用库函数,初始化以及使用。浙江省
水平集方法在图像分割时需要不断的初始化,使得曲线演化的速度大大地降低,而无需初始化水平集方法可以很好的克服这一缺点,显著提升曲线演化速度。
包含RCC初始化的stm32跑马灯实验,详细介绍了每个环节,是stm32入门的好东西
西门子S7-1500CPU下载函数块,数据块无需初始化功能pdf,西门子S7-1500CPU下载函数块,数据块无需初始化功能:S7-1500CPU下载函数块与数据块无需重新初始化功能的说明,包括具体步骤和注意事项。
混沌映射sin映射初始化种群,与标准pso求解sphere函数,精度更好
板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序板初始化程序
matlab初始化数组
注意:本文所说的全局变量指的是 variables with static storage,措词来自 c++ 的语言标准文档。 什么时候初始化 ... static initialization: 静态初始化指的是用常量来对变量进行初始化,主要包括 zero init
vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue初始化模板vue...
主要介绍了C#中结构(struct)的部分初始化和完全初始化,通过实例分析了结构初始化中常见的错误及技巧,有助于加深对C#结构(struct)的认识,需要的朋友可以参考下
(1)利用单片机小系统实习板,掌握电路原理图;...(3)掌握程序编制及调试方法,完成系统初始化、存储器操作、端口操作、模拟量采集、模拟量输出、串口通讯、IIC、日历时钟芯片、键盘显示等程序的编制及调试。