慕课网

信息滚动效果制作

最热最新

用指尖改变世界4062338

无缝滚动：当内容滚完之后，不想让它停止，也不让它空白。说明：蓝色为显示区域，橘黄色为要滚动的内容无缝滚动原理：原始内容为1，克隆内容为2 当原始内容底部到达可视区的底部时，重新克隆出原始内容2,2在紧接在1的后面当1的内容滚出可视区，2的内容到达可视区的顶部时，此刻就开始了无缝滚动

查看全部

1 采集收起来源：无缝滚动原理
2016-10-15
缘分星空

direction滚动方向：down up left right loop滚动次数=-1表示一直滚动

查看全部

0 采集收起来源：marquee标签实现信息滚动
2016-10-15
jazia

<marquee></marquee>文字信息滚动标签。可以设置滚动方向、速度、时间。滚动方式：来回滚动，重复滚动和非重复滚动属性说明: 1.direction表示滚动的方向，值可以是left，right，up，down，默认为left 2.behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动） 3.loop表示循环的次数，值是正整数，默认为无限循环 4.scrollamount表示运动速度，值是正整数，默认为6 5.scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒 6.align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle 7.bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色 8.height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度 9.hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。 1o.onmouseover=this.stop();onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

查看全部

2 采集收起来源：marquee标签实现信息滚动
2018-03-22
慕粉3250152

无缝滚动的要点： 1）盒子容器要设置好固定的高度，并且自动隐藏内容超出的部分（overflow: hidden; ）。 2）盒子的高度不能超过内容高度的。超过了会导致scrollTop 属性值不能变动。即ScrollTop值不能大于滚动内容的高度。 3）实际滚动的内容只有con1，con2只是用来填充尾部内容的。测试： 1）修改盒子容器的样式，让高度超过con1的高度。 /* 中间样式 */ #moocBox { height: 244px; /* 大于216都可以，但为了显示增加的con3的内容，加高一点。*/ 2) HTML 修改。在con2下面增加一个con3. <ul id="con2"> </ul> <ul id="con3"> <li><a href="#">1.Test1</a>2013-09-18</li> <li><a href="#">2.Test2</a>2013-10-09</li> <li><a href="#">3.Test3</a>2013-10-21</li> <li><a href="#">4.Test4</a>2013-11-01</li> <li><a href="#">5.Test5</a>2013-11-06</li> <li><a href="#">6.Test6</a>2013-11-08</li> <li><a href="#">7.Test7</a>2013-11-15</li> <li><a href="#">8.Test8</a>2013-11-22</li> <li><a href="#">9.Test9</a>2013-12-06</li> </ul>

查看全部

0 采集收起来源：无缝滚动制作
2018-03-22
LFWen

知识点： 1.innerHTML 2.scrollTop 3.offsetHeight 4.setInterval() 5.clearInterval()

查看全部

0 采集收起来源：无缝滚动制作
2016-10-08
啊7 12:04

滚动

查看全部

0 采集收起来源：marquee标签实现信息滚动
2016-10-08
weibo_本宫li不矫情

1、innerHTML 2、scrollTop（向上滚动的数值）后面的值不带px，如area.scrollTop = 0； 3、offsetHeight（元素自身的高度） 4、setInterval()（执行的方法） 5、clearInterval()（清除执行的方法） 

查看全部

0 采集收起来源：无缝滚动制作
2018-03-22
weibo_本宫li不矫情

marquee标签，成对出现： behavior 滚动的方式： alternate 表示在两端之间来回滚动 scroll 表示由一端滚动到另外一端会重复 slide 表示由一端滚动到另一端不会重复 direction的滚动方式： down,up,left,right loop滚动的次数（当loop=-1表示一直滚动下去，默认-1） scroollamount设定活动字幕的滚动速度 scrolldelay设定活动字幕滚动两次之间的延长时间

查看全部

0 采集收起来源：marquee标签实现信息滚动
2016-10-08
宝宝周 03:31

marquee的知识点

查看全部

0 采集收起来源：marquee标签实现信息滚动
2016-10-08
BeingTowards 01:29

setTimeout和setInterval

查看全部

0 采集收起来源：间歇性循环滚动制作
2016-10-05
BeingTowards

使用scrollLeft的必要条件是第一：此标签的内容宽度超过了标签本身的宽度。这个很容易理解，如果内容没有超过标签的宽度，不需要横向的滚动就可以看到所有横向的范围，那在使用scrollLeft的时候肯定是无效的了。在这里很多新手经常会犯一个错误，内容的大小确实是超过了标签的显示范围，但是却因为浏览器的默认属性换行了，也就是没有在横向上超出，这时候同样是不能使用scrollLeft的。第二：scrollLeft的值范围是在一定范围内的，不能无限增大。当内容的最右端可以显示的时候，scrollLeft便不能再增加了。这个也容易理解。以浏览器右侧滚动条为例，这个滚动条肯定是能拖到底的，这个拖动有一定的范围，跟页面内容高度有关。第三：scrollLeft（包括其他三个）常与定时器一起使用，实现位置移动效果，如滚动。你应该遇到的是第一个条件不满足才产生的这个问题。所以建议你可以采用改变ul的margin-Left的值实现滚动效果

查看全部

0 采集收起来源：间歇性滚动原理
2016-10-05
BeingTowards 01:31

无缝滚动设置鼠标移入停止滚动，移出继续滚动

查看全部

0 采集收起来源：鼠标悬停事件添加
2016-10-05
BeingTowards 07:06

定义一个元素，然后将该元素克隆一个，当原始的元素内容结尾出现时，也就是滚动高度等于元素的offsetHeight，后面跟上克隆元素，当原始元素内容滚动完时，将滚动高度值为0，即从头开始滚动，这样就达到了无缝滚动 scrollTop：为元素内容被卷去的高度

查看全部

1 采集收起来源：无缝滚动制作
2016-10-05
BeingTowards 03:30

marquee的属性： scrolldely单位毫秒可以设置鼠标移入停止：onmouseover="this.stop();"；鼠标移出继续滚动：onmouseout="this.start();"

查看全部

0 采集收起来源：marquee标签实现信息滚动
2018-03-22
MiMeiK 03:36

<marquee>知识点

查看全部

0 采集收起来源：marquee标签实现信息滚动
2018-03-22

首页上一页 12 13 14 15 16 17 18 下一页尾页

0/150

提交

取消

该课程已下架

课程须知: 1.您至少具备HTML/CSS基础知识； 2.您至少具备JavaSript基础知识；

老师告诉你能学到什么？: 1.学会<marquee>标签及属性，制作简单信息滚动。 2.掌握无缝滚动原理，运用JavaScript实现效果。 3.通过设定定时时间，实现间歇性无缝滚动。