【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="向左"> ...
随机推荐
- git方式安装thinkphp5
1.thinkphp 的github 代码版本地址:https://github.com/top-think 2. 点击think 复制 地址 3. 新建thinkphp5 文件夹 git clone ...
- angularjs-select2的使用
1.引入文件 '/select2.css', '/select2-bootstrap.css', '/select2.min.js', ‘/angular-select2.min.js’ 2.页面 3 ...
- 在html中使用特殊字体
目的:一首诗,要求从右往左读,垂直排列,类似古文 效果图: html内容: <!doctype html><html lang="en"><head& ...
- WangleEditor3提交数据（servlet-jsp）
用servlet提交 WangEditor3编辑的内容,找了很多资料没发现,大多用的框架,今天终于解决了,记录一下. WangEditor3不支持放在textarea中,servlet是无法直接获取到 ...
- 上了IPD和CMMI，为什么还要搞敏捷？
文/资深顾问 杨学明 现在国内许多产品创新型企业一旦研发团队上了规模,就会进行IPD体系的变革或CMMI的认证,但现在还有一种更加流程的开发模式,就是敏捷,华为公司早在2009年正式发文在全公司现在流 ...
- WordCount作业修改
WordCount作业修改 github地址 需求说明 基本需求 功能说明 PSP 代码实现 字符总数查询 单词数查询 行数查询 总结 一.需求说明 1.基本需求 WordCount的需求可以概括为: ...
- 2016-04-25-信息系统实践手记6-JS调用Flex的性能问题一例
layout: post title: 2016-04-25-信息系统实践手记6-JS调用Flex的性能问题一例 key: 20160425 tags: GIS JS FLEX 技术选型 性能 API ...
- 关于正餐智能POS6.0.1.1改版后，订单模块无法进行部分退款的FAQ
适用版本:智能POS正餐V6.0.1.1+ 适用情况:订单模块,无法输入自定义金额进行部分退款. 原因:为让报表统计的数据更准确. 改版之后仍可适用部分退款的情况: 1.口碑先付订单,可在口碑模块,选 ...
- windows网络编程中文 笔记（二）
IPv4 地址段 IPv4地址类别 种类 网络部分 第1个数字 端点数字 A 8位 0-127 16777216 B 16位 128-191 65526 C 24位 193-223 ...
- H5——简易马祖
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...