【js】横/纵向无缝滚动
1.纵向无缝滚动（类似淘宝）
ps:存在一个问题，当鼠标移入时，未关闭定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
margin:100px auto;
border:1px solid #ccc;
width:170px;
height:42px;
line-height:20px;
overflow:hidden;
}
.box .content{
list-style-type:none;
margin:0;padding:0;
margin-left:6px;
}
/*系统支持ie8就选line-height:16px;，但不支持opera 否则选line-height:20px;*/
.box .content a{
font-size:12px;
line-height:16px;
}
</style>
</head>
<body>
<div class="box">
<div id="transverseRoll">
<div class="content">
<a href="http://www.zzjs.net/" target="_blank"><span style="color:#FF0000">滚动文字一号</span></a>
<a href="http://www.zzjs.net/" target="_blank"><span style="color:#FF0000">滚动文字二号</span></a>
</div>
<div class="content">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#3333FF">滚动文字三号</span>
</a>
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#3333FF">滚动文字四号</span>
</a>
</div>
</div>
<script language="javascript">
function startmarquee(lh,speed,delay) {//lh-高度，speed 时间，
var bFlag = false;
var timer = null;
var _timer = null;
var obj = document.getElementById("transverseRoll");//获取滚动元素
obj.innerHTML += obj.innerHTML;//滚动元素的内容为2倍自己的内容
obj.style.marginTop = 0;
obj.onmouseover=function(){ bFlag = true;}//鼠标移入
obj.onmouseout=function(){ bFlag = false;}//鼠标移出
function start(){
clearInterval(timer);
timer = setInterval(scrolling,speed);
if(!bFlag) obj.style.marginTop=parseInt(obj.style.marginTop) - 1 + "px";
console.log('setTimeout:',obj.style.marginTop);
}
function scrolling(){
if(parseInt(obj.style.marginTop) % lh != 0){
obj.style.marginTop = parseInt(obj.style.marginTop) - 1 + "px";//滚动物体的marginTop >= 它的滚动高度/2 比如 |-40| >= 80/2 →→→→→→→→→→ 0 % 20 = 0
if(Math.abs(parseInt(obj.style.marginTop)) >= obj.scrollHeight / 2 ) obj.style.marginTop = 0;
}else{
clearInterval(timer);
clearTimeout(_timer);
setTimeout(start,delay);
}
}
clearTimeout(_timer);
setTimeout(start,delay);
}
startmarquee(20,20,1500);
</script>
</body>
</html>
2.横向无缝滚动（angularjs）
ps:走马灯效果
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></script>
<style>
.transverseRoll {
white-space: nowrap;
overflow: hidden;
width: 38%;
margin: 3px auto;
padding: 10px 20px 15px 0px;
position: fixed;
left: 5%;
color: white;
background-color: black;
z-index: 1;
}
</style>
<script>
var app = angular.module("myApp", []);
app.directive("transverseRolling", function ($interval) {
return {
link: function (scope, element, attrs) {
var timer = null;
var scroll = function (obj) {
//获取滚动条到元素左边的距离
var tmp = (obj.scrollLeft)++;
if (obj.scrollLeft == tmp) {
//当滚动条到达右边顶端时,将文字追加在元素末尾
obj.innerHTML += "    " + obj.innerHTML;
}
if (obj.scrollLeft >= obj.offsetWidth) {
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
obj.scrollLeft = 0;
}
}
var _scroll = function(param) {
//将滚动条位置向右移动一个像素,计算滚动条是否到达右侧尽头
return function () {
scroll(param);
};
}
var mouseover = function () {
//鼠标移入时取消滚动效果
$interval.cancel(timer);
}
var _mouseout = function(target) {
//鼠标移出事件,设置滚动效果
return function () {
if (target) {
timer = $interval(_scroll(target), 20);
}
};
}
// 设置滚动效果
timer = $interval(_scroll(element[0]), 20);
//给指令所在的div添加鼠标移入移出事件监听
element[0].addEventListener("mouseover", mouseover);
element[0].addEventListener("mouseout", _mouseout(element[0]));
}
}
});
</script>
</head>
<body ng-app="myApp" >
<div transverse-rolling class="transverseRoll">使用angularjs搭建项目，实现无缝滚动效果，主旨是：使用计时器和滚动距离实现的。</div>
</body>
</html>
作者：smile.轉角
QQ：493177502
【js】横/纵向无缝滚动的更多相关文章
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- js文字的无缝滚动（上下）
使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...
- js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 在 HTML 无缝滚动
marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...
- js原生实现 无缝滚动图片
<!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...
- 图片滚动js 实现图片无缝滚动
在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...
- CSS3+HTML5特效3 - 纵向无缝滚动
老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...
- js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。
一:html部分 <body> <input id="btn1" type="button" value="向左"> ...
随机推荐
- css3巧用选择器配合伪元素
一 . 前言 有时我们在写底部导航栏时,会有很多超链接,每个链接间用“|”分割,如下图: 可能刚入门的朋友会想到这样完成,再单独设置span的样式, 今天主要介绍怎么样用css3简单快速的完成这个效果 ...
- 如何用ABP框架快速完成项目(4) - 如何正确使用ABP?
正如我在<如何用ABP框架快速完成项目(2) - 快的定义!>提到的, 很多同学在使用ABP中遇到很多问题, 花了很多时间和精力, 然而从最根本的角度和方向上来看这些问题应该是不存在. 这 ...
- 用ABP只要加人即可马上加快项目进展(二) - 分工篇
2018年和1998年其中两大区别就是: 前端蓬勃发展, 前后端分离是一个十分大的趋势. 专门的测试人员角色被取消, 多出了一个很重要的角色, 产品经理 ABP只要加入即可马上加快项目进展, 选择 ...
- AndroidStudio安装、配置、测试
AndroidStudio安装.配置.测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.安装测试 4.模拟器安装.使用 5.常用配置 6.注事事项 7.相关博文 >>看 ...
- Android项目实战（四十二）：启动页优化，去除短暂白屏或黑屏
大家会发现一个空项目,从手机桌面打开app是秒启动.但是对于自己开发的项目,有时会发现打开app的时候,会有短暂的1秒--2秒的白屏或者黑屏,然后才进入到程序界面. 个人理解为我们自己实现的Appli ...
- Python3 jupyter notebook 服务器搭建
1. jupyter notebook 安装 创建 jupyter 目录 mkdir jupyter cd jupyter/ 创建独立的 Python3 运行环境,并激活进入该环境 virtualen ...
- SpringBoot集成Swagger接口管理工具
手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文档更新交流不及时. 接口返回结果不明确 不能直接在线测试接口,通常需要使用工具,比如postman 接口文档太多,不好管 ...
- [Java]Socket和ServerSocket学习笔记
对于即时类应用或者即时类的游戏,HTTP协议很多时候无法满足于我们的需求.这会,Socket对于我们来说就非常实用了.下面是本次学习的笔记.主要分异常类型.交互原理.Socket.ServerSock ...
- 最近因为突然喜欢这方面的ui设计，所以搜刮了很多我试过可用性强的界面，又可爱又实用···分享给大家咯
最近因为突然喜欢这方面的ui设计,所以搜刮了很多我试过可用性强的界面,又可爱又实用···分享给大家咯 1.Side-Menu.Android 分类侧滑菜单,Yalantis 出品. 项目地址:http ...
- shell中的set、seq、eval、exec、&&和||
一.set 查看set 帮助: bash -c "help set" 选项: -e:任何命令执行失败(非0 status)直接退出 -x: 打印执行过程的命令行.参数 +e:命令执 ...