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

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. Ubuntu下搭建多用户多权限ftp

    #1.切换root用户模式 (已在root模式下的请忽略) sudo -i #然后提示你输入当前用户密码,输入密码后回车后如果密码正确控制台就变成root@***:/# 了. #2.更新软件源 apt ...

  2. Vue之数据传递

    基础:vue的响应式规则 简单的props更新 父组件 <template> <div> <block-a :out-data="x">< ...

  3. destoon ip接口失效修改 修改后偶尔会加载很慢

    因为百度ip转换增加了密匙验证,所以导致之前的接口无法再转换ip地址的信息,修复方法如下:打开include\cloud.func.php文件搜索: function iplookup($ip) { ...

  4. 《linux设备驱动开发详解》笔记——18 ARM linux设备树

    18.1 设备树的起源 linux 2.6及之前,大量板级信息被硬编码到内核里,十分庞大,大量冗余代码: linux 2.6之前,引入了设备树: 设备树源于OpenFirmware,描述硬件的数据结构 ...

  5. List<Object>删除某一个Object

    1.直接删除: List<LineShop> tlineprices  = new ArrayList<>(); tlineprices.remove(0); 2.使用遍历删除 ...

  6. LeetCode(220) Contains Duplicate III

    题目 Given an array of integers, find out whether there are two distinct indices i and j in the array ...

  7. micrium ucprobe使用笔记

    前段时间在学习ucos-iii的时候,用到了micrium ucprobe,发现在调试的时候,很方便,可以直观的看到任务的运行使用情况,全局变量的值变化等,当然详细的可以参考官方文档,也可以参考网上的 ...

  8. Jack Straws POJ - 1127 (几何计算)

    Jack Straws Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5428   Accepted: 2461 Descr ...

  9. 1512 Monkey King

    Monkey King Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  10. CodeForces 489F DP Special Matrices

    首先统计一下前m行中,有x列1的个数为0,有y列1的个数为1. 设d(i, j)表示有i列1的个数为0,有j列1的个数为1,能到达这个状态的矩阵的个数. 则d(x, y) = 1 每一行都是两个1一起 ...