这种节奏经常用在相同布局内容多的地方,列如排行榜,新闻等地方。为了效率,在此做个笔记

HTML:

<div id="divgd">
<div id="boxmiddle">
<div id="box1samlle">
<span><label>王芳王芳王芳王芳王芳王芳</label>156****9707<label>护肤礼包</label></span>
<span><label>留校留校留校留校</label>156****9707<label>护肤礼包护肤礼包护肤礼包护肤礼包</label></span>
<span><label>阿雅阿雅阿雅阿雅阿雅阿雅</label>156****9707<label>护肤礼包</label></span>
<span><label>韩语</label>156****9707<label>护肤礼包</label></span>
<span><label>小刘</label>156****9707<label>护肤礼包</label></span>
<span><label>张小泉</label>156****9707<label>护肤礼包护肤礼包护肤礼包护肤礼包护肤礼包护肤礼包</label></span>
<span><label>兰国富兰国富兰国富兰国富兰国富</label>156****9707<label>护肤礼包</label></span>
<span><label>草尼玛草尼玛草尼玛草尼玛</label>156****9707<label>护肤礼包</label></span>
<span><label>菊花</label>156****9707<label>护肤礼包</label></span>
<span><label>兰花</label>156****9707<label>护肤礼包</label></span>
</div>
<div id="addbox1"></div>
</div>
</div>

 

CSS:

#divgd {width: 78%;height: 26rem;overflow: hidden;color: #333;margin: 0 auto;font-size: 1rem;}
#boxmiddle {width: 100%;height: 800%;background: pink;} #box1samlle,
#addbox1 {float: left;display: block;width: 100%;} #box1samlle span,
#addbox1 span {float: left;width: 100%;display: block;text-align: center;height: 3rem;line-height: 3rem;} #box1samlle span label,
#addbox1 span label {display: inline-block;width: 30%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} #box1samlle span label:nth-of-type(1),
#addbox1 span label:nth-of-type(1) {float: left;} #box1samlle span label:nth-of-type(2),
#addbox1 span label:nth-of-type(2) {float: right;}

JS:

var speed1 = 60;
var demo = document.getElementById("divgd");
var demo1 = document.getElementById("box1samlle");
var demo2 = document.getElementById("addbox1");
demo2.innerHTML = demo1.innerHTML;
if(document.querySelectorAll("span").length>=20){
var MyMar = setInterval(Marquee, speed1);
}else{ }
function Marquee() {
if(demo2.offsetHeight - demo.scrollTop <= 0) {
demo.scrollTop -= demo1.offsetHeight
} else {
demo.scrollTop++;
}
} //下面的一般用在电脑端鼠标事件 demo.onmouseover = function() {
clearInterval(MyMar)
};
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed1);
}

js-无缝向上滚动的更多相关文章

  1. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  2. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  3. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  4. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  5. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  6. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  7. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  8. js实现向上滚动效果

    源码: <style type="text/css"> #up_zzjs{border:1px solid #ccc;width:170px;height:182px; ...

  9. jquery无缝向上滚动实现代

    <!DOCTYPE html><html><head><style type="text/css">.renav{width:200 ...

  10. JS无缝文字滚动(兼容各大浏览器)

    <style>*{margin:0px;padding:0px;border:0px;}body{font-size:12px}#demo1{height:auto;text-align: ...

随机推荐

  1. Voyager的路由

    修改默认的后台登录路由 打开web.php,把prefix值改为你想设置的值,如back: Route::group(['prefix' => 'back'], function () { Vo ...

  2. vim小操作

    初时,先有ed,ed为ex之父,ex为vi之父,而vi为vim之父 c 修改 d 删除 y 复制到寄存器 g~ 反转大小写 gu 反转为小写 gU 反转为大写 > 增加缩进 < 减小缩进 ...

  3. PHP函数详解:call_user_func()使用方法

    call_user_func函数类似于一种特别的调用函数的方法,使用方法如下: <?php function nowamagic($a,$b) { echo $a; echo $b; } cal ...

  4. destoon 屏蔽会员组,让个人,游客不显示

    include/post.fun.php  文件的group_select函数增加 排除参数 except function group_select($name = 'groupid', $titl ...

  5. php 计算当天凌晨时间戳 以及获取其他常用时间戳

    php 计算当日凌晨时间戳 以及获取其他常用时间戳(持续补充中...) 获取当天凌晨时间戳: echo strtotime(date('Y-m-d')); 以下再列举一些获取其他常用时间戳的方法 获取 ...

  6. Install GStreamer on Ubuntu

    apt-get install libgstreamer1.0-0 gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-p ...

  7. LeetCode(44) Wildcard Matching

    题目 Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single characte ...

  8. STM8 EEPROM心得

    对于STM8来说,其内部的EEPROM确实是个不错的东西,而且STM8S103/105价格已经非常便宜了,当然也可以用STM8S003/005代替,而且价格更便宜,大概在,1.2/2.0元左右,比10 ...

  9. HDU 4866 Shooting 扫描线 + 主席树

    题意: 在二维平面的第一象限有\(n(1 \leq n \leq 10^5)\)条平行于\(x\)轴的线段,接下来有\(m\)次射击\(x \, a \, b \, c\). 每次射击会获得一定的分数 ...

  10. STF 连接其它操作系统上的安卓设备实操介绍【转】

    功能简介:https://www.jianshu.com/p/464fadaeb1d7 搭建教程:https://blog.csdn.net/xl_lx/article/details/7944586 ...