js-无缝向上滚动
这种节奏经常用在相同布局内容多的地方,列如排行榜,新闻等地方。为了效率,在此做个笔记
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-无缝向上滚动的更多相关文章
- 原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- vue文字间歇无缝向上滚动
公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- js实现文字列表无缝向上滚动
body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...
- js实现向上滚动效果
源码: <style type="text/css"> #up_zzjs{border:1px solid #ccc;width:170px;height:182px; ...
- jquery无缝向上滚动实现代
<!DOCTYPE html><html><head><style type="text/css">.renav{width:200 ...
- JS无缝文字滚动(兼容各大浏览器)
<style>*{margin:0px;padding:0px;border:0px;}body{font-size:12px}#demo1{height:auto;text-align: ...
随机推荐
- Ubuntu下搭建多用户多权限ftp
#1.切换root用户模式 (已在root模式下的请忽略) sudo -i #然后提示你输入当前用户密码,输入密码后回车后如果密码正确控制台就变成root@***:/# 了. #2.更新软件源 apt ...
- Vue之数据传递
基础:vue的响应式规则 简单的props更新 父组件 <template> <div> <block-a :out-data="x">< ...
- destoon ip接口失效修改 修改后偶尔会加载很慢
因为百度ip转换增加了密匙验证,所以导致之前的接口无法再转换ip地址的信息,修复方法如下:打开include\cloud.func.php文件搜索: function iplookup($ip) { ...
- 《linux设备驱动开发详解》笔记——18 ARM linux设备树
18.1 设备树的起源 linux 2.6及之前,大量板级信息被硬编码到内核里,十分庞大,大量冗余代码: linux 2.6之前,引入了设备树: 设备树源于OpenFirmware,描述硬件的数据结构 ...
- List<Object>删除某一个Object
1.直接删除: List<LineShop> tlineprices = new ArrayList<>(); tlineprices.remove(0); 2.使用遍历删除 ...
- LeetCode(220) Contains Duplicate III
题目 Given an array of integers, find out whether there are two distinct indices i and j in the array ...
- micrium ucprobe使用笔记
前段时间在学习ucos-iii的时候,用到了micrium ucprobe,发现在调试的时候,很方便,可以直观的看到任务的运行使用情况,全局变量的值变化等,当然详细的可以参考官方文档,也可以参考网上的 ...
- Jack Straws POJ - 1127 (几何计算)
Jack Straws Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5428 Accepted: 2461 Descr ...
- 1512 Monkey King
Monkey King Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- 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一起 ...