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