【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="向左"> ...
随机推荐
- Could not open input file: artisan 【Laravel初体验】
1,情景描述:在命令行窗口写入php artisan make:model Models\MenuModel用于创建模型时,出现此错误(Could not open input file: artis ...
- chartControl ViewType.Bar 用法测试
使用方法 一. Datatable : chartControl1.Series.Clear(); DataTable dt = new DataTable(); dt.Columns.Add(&qu ...
- BZOJ3687: 简单题(dp+bitset)
Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1138 Solved: 556[Submit][Status][Discuss] Descripti ...
- Spotlight on Mysql在Windows平台下的安装及使用简介
Spotlight on Mysql在Windows平台下的安装及使用简介 by:授客 QQ:1033553122 1. 测试环境 Win7 64位 mysql-connector-odbc- ...
- Python对象相关内置函数
针对一个对象,通过以下几个函数,可以获取到该对象的一些信息. 1.type() ,返回某个值的类型 >>> type() <class 'int'> >>&g ...
- 小程序实践（三）：九宫格实现及item跳转
效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. --------------------------------------------------------------- ...
- react-fetch数据发送请求
在一个项目中,数据的请求发送数据是最为重要的,不可能我们的数据都是自己进行编写的 在react中官方推荐使用的方法是fetch.当然它里面也可以使用vue中的axios请求数据,jQuery的$.aj ...
- Android Studio多渠道打包（一）
1. 多渠道的概念 APP发布到不同的应用平台,监测用户是从哪个平台安装的. 2. 为什么要多渠道打包 统计用户安装APP来源 批量修改生成的apk文件名 可更改包名 生成不同应用名称或图标 3.多渠 ...
- DAY14(PYTHONS)生成器进阶
def average(): sum = 0 count = 0 avg = 0 while True: #循环 num = yield avg #遇到yield就停止,防止一开始除数为0导致崩溃 s ...
- 个人项目：Java实现WC
Java实现WC Github项目地址:https://github.com/auxshaw/WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个 ...