【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="向左"> ...
随机推荐
- CDRAF之Service mesh
最近翻看一些网上的文章,偶然发现我们的CDRAF其实就是Service mesh的C++版本.不管从架构的理念上,或者功能的支持上面,基本完全符合.发几个简单的文章链接,等有时间的时候,再来详细描述. ...
- Java并发编程-看懂AQS的前世今生
在具备了volatile.CAS和模板方法设计模式的知识之后,我们可以来深入学习下AbstractQueuedSynchronizer(AQS),本文主要想从AQS的产生背景.设计和结构.源代码实现及 ...
- jquery网页日历显示控件calendar3.1使用详解
关于日历插件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件.我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历.Calendar ...
- K8S 部署 ingress-nginx (三) 启用 https
部署 https 证书 cd ~/ingress # 生成私钥 tls.key, 密钥位数是 2048 openssl genrsa -out tls.key 2048 # 使用 tls.key 生成 ...
- Html：html是什麽、html文件结构
相关内容: html是什麽 html文件结构 首发日期:2018-02-12 html是什么: hmtl超文本标记语言,标准通用标记语言下的一个应用. html专门用于网页,它的“标志符”告诉了浏览器 ...
- mysql的连接
本文内容: mysql客户端连接服务端 断开连接 首发日期:2018-04-07 mysql客户端连接服务端: 连接服务端的命令基本语法是: mysql -h host -u user -p -P p ...
- java质数判断
import java.util.Scanner; /** * Created by Admin on 2017/3/25. */ public class test01 { public stati ...
- Exception in thread "main" java.lang.RuntimeException: Hive metastore database is not initialized. Please use schematool (e.g. ./schematool -initSchema -dbType ...) to create the schema. If needed, do
继上一篇Hive: Exception in thread "main" java.lang.RuntimeException: Hive metastore database i ...
- [20181015]为什么是3秒.txt
[20181015]为什么是3秒.txt --//以前测试:连接http://blog.itpub.net/267265/viewspace-2144765/=>为什么是12秒.txt.--// ...
- mssql sqlserver 使用sql脚本检测数据表中一列数据是否连续的方法分享
原文地址:http://www.maomao365.com/?p=7335 摘要: 数据表中,有一列是自动流水号,由于各种操作异常原因(或者插入失败),此列数据会变的不连续,下文将讲述使用sql ...