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: ...
随机推荐
- Ajax原生代码
Ajax传数据有两种方式:get/post.下面是前台的get/post方式的代码. //------------原生--------- function AjaxGET(){ //第一步 调用Aja ...
- Beyond Compare 4 30天试用期后,破解方法
Beyond Compare 4 30天试用期后,破解方法. 方法一:在安装目录下找到文件BCUnrar.dll,比如:D:\software\Beyond Compare 4,重命名该文件即可. 重 ...
- 使用python3调用MyQR库生成动态二维码(附源代码)
可生成普通二维码.带图片的艺术二维码(黑白与彩色).动态二维码(黑白与彩色). GitHub:https://github.com/sylnsfar/qrcode 中文版:https://github ...
- Python9-进程理论-day35
#!/usr/bin/env python# -*- coding:utf-8 -*-# Author:Tim'''进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源 ...
- light oj 1104 Birthday Paradox (概率题)
Sometimes some mathematical results are hard to believe. One of the common problems is the birthday ...
- CodeForces 543D 树形DP Road Improvement
题意: 有一颗树,每条边是好边或者是坏边,对于一个节点为x,如果任意一个点到x的路径上的坏边不超过1条,那么这样的方案是合法的,求所有合法的方案数. 对于n个所有可能的x,输出n个答案. 分析: 题解 ...
- UVa 12235 状压DP Help Bubu
题解戳这 一开始没看懂题解,后来想明白以后,d(i, j, s, x)是考虑第i本书的时候,前面已经拿走了j本书,剩下的书的种类的二进制状态为s,剩下的最后一本书的编号为x,所能得到的最小混乱度. 这 ...
- iOS启动图 LaunchImage LaunchScreen.xib
1.Images.xcassets添加LaunchImage 2.具体大小和添加类别都是可以调的 640*960 (4/4s) 2X ...
- 通用的前端js代码
1.判断是否移动设备的浏览器,是否允许触摸事件.(响应式网页) if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i. ...
- 大数据学习——akka学习
架构图 重要类介绍 ActorSystem 在Akka中,ActorSystem是一个重量级的结构,他需要分配多个线程,所以在实际应用中,ActorSystem通常是一个单例对象,我们可以使用这个Ac ...