【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="向左"> ...
随机推荐
- Aurelia binding
今天介绍一下使用Aurelia binding 模块绑定HTML属性/事件的方式.我们依然使用之前创建的代码例子. Aurelia binding 绑定属性或者方法的通用模式就是 XXX.comman ...
- angular select2 下拉单选和多选的取值赋值
官网:http://select2.github.io/examples.html 兼容性: 引入文件 /select2.min.js /select2.min.css html <select ...
- HTML元素被定义为块级元素或内联元素。那么什么是块级元素，什么是内联元素呢
块级元素(block)特性: 块级元素在浏览器显示时,通常会以新行来开始(和结束). 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制;就像以前用到的 ...
- Android 滑动定位+吸附悬停效果实现
在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接: Android 实现锚点定位 Android t ...
- 制作OTA升级包
OTA 软件包工具 本文地址http://wossoneri.github.io/2018/09/21/%5BAndroid%5D%5BFramework%5Dcreate-ota-update-zi ...
- 智能ERP 交接班统计异常的解决方法
请注意,有交接班统计数据不准确的需开启离线统计即可解决,交接班统计是按照结账时间来进行统计的 1.点击左侧导航栏中‘更多’-进入系统设置 2.进入营业设置后-开启离线统计-点击保存
- mssql sqlserver xml数据类型专题
摘要: 下文将详细讲述sql server xml数据类型的相关知识,如下所示: 实验环境: sql server 2008 R2 xml数据类型简介: mssql sqlserver xml数据类型 ...
- 纯JS编写打地鼠游戏
这个游戏是本人前不久刚入门编写的游戏,感觉里面代码很LOW但是对于新手来说很一般般吧~ 没有上传音乐文件了 运行效果: 上代码(HTML+JS): <!DOCTYPE html> < ...
- Linux系统修改日期时间
linux修改时间 服务器时间与网络时间不符: 一.手动修改 1. date命令:查看当前时间 2. date -s 时分秒 :修改时间 还需要把日期改过来 3. date -s 完整日期时间 ...
- jQuery设置元素的readonly和disabled属性
jQuery的api中提供了对元素应用disabled和readonly属性的方法,如下: 1.readonly $('input').attr("readonly",&qu ...