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 {
restrict: 'A',
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