無縫循環marquee滾動JS代碼實現，兼容IE, FireFox, Chrome，供大家參考，具體內容如下
首先是CSS和HTML如下:
#marquee_zxd {
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
width: 500px;
padding-top: 5px;
}
#marquee_zxd img {
height: 100px;
}
下面是JS實現marquee_zxd.js：
/**除了Chrome以外的瀏覽器可以通過scrollLeft屬性控制滾動*/
function scrolleft(obj){
var $obj = $(obj);
//到右邊頂端后不會再變
//var temp = obj.scrollLeft;
//obj.scrollLeft++;
var temp = $obj.scrollLeft();
//console.log(temp);
$obj.scrollLeft(temp+1);
//當滾動條到達右邊頂端時;或本身長度不夠不好滾動(漫出才好滾)
//if(obj.scrollLeft == temp){
if($obj.scrollLeft() == temp){
obj.innerHTML += obj.innerHTML;
console.log('copy');
}
//當滾動條滾動了初始內容的寬度時，滾動條回到最左端，模擬循環
//if (obj.scrollLeft >= obj.firstChild.offsetWidth)
// obj.scrollLeft = 0;
if ($obj.scrollLeft() >= obj.firstChild.offsetWidth)
$obj.scrollLeft(0);
}
/**除了Chrome以外的瀏覽器可以通過scrolleft()滾動*/
function initMarquee(){
var aaa = document.getElementById('marquee_zxd');
var MyMar = setInterval(function(){
scrolleft(aaa);
}, 20);
//鼠標移上時清除定時器達到滾動停止的目的
aaa.onmouseover=function() {clearInterval(MyMar);};
//鼠標移開時重設定時器
aaa.onmouseout=function() {MyMar = setInterval(function(){
scrolleft(aaa);
}, 20);};
}
/**Chrome定時器循環函數，通過relative布局的left屬性控制滾動*/
function scrolleftChrome($marquee_inner, inner_width){
var width = parseInt(inner_width);
var leftPx = $marquee_inner.css("left");
//兼容IE
if(leftPx == 'auto')
leftPx = 0;
//位置左移
var left = parseInt(leftPx);
left = left - 1;
//到頂歸位
if(left <= -width)
left = 0;
$marquee_inner.css("left", left);
//console.log(width + ", " + left);
}
/**Chrome瀏覽器可以通過scrolleftChrome滾動*/
function initMarqueeChrome() {
//局部變量不污染全局變量空間
var $marquee_inner = $('#marquee_inner');
//原內容大小
var inner_width = $marquee_inner.css('width');
//復制一份原內容
var innerHtml = $marquee_inner.html();
$marquee_inner.html(innerHtml + innerHtml);
console.log(inner_width);
//參數采用字符串形式的缺陷：參數不能被周期性改變,參數必須是全局變量
//var MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 5000);
var MyMar = setInterval(function(){
//參數不污染全局變量空間
scrolleftChrome($marquee_inner, inner_width);
}, 50);
var marquee_zxd = document.getElementById('marquee_zxd');
//鼠標移上時清除定時器達到滾動停止的目的
marquee_zxd.onmouseover=function() {clearInterval(MyMar);};
//鼠標移開時重設定時器
marquee_zxd.onmouseout=function() {
//參數采用字符串形式的缺陷：參數不能被周期性改變,參數必須是全局變量
//MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 50);
MyMar = setInterval(function(){
//參數不污染全局變量空間
scrolleftChrome($marquee_inner, inner_width);
}, 50);
};
}
$(function(){
var ua = window.navigator.userAgent;
var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1;
var isFirefox = ua.indexOf("Firefox") != -1;
var isChrome = ua.indexOf("Chrome") && window.chrome;
if(isChrome){
initMarqueeChrome();
console.log("isChrome: initMarqueeChrome");
}else{
initMarquee();
console.log("isChrome: initMarquee");
}
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
JS與HTML結合使用marquee標簽實現無縫滾動效果代碼
JQuery插件Marquee.js實現無縫滾動效果
div+css+js實現無縫滾動類似marquee無縫滾動兼容firefox
分別用marquee和div+js實現首尾相連循環滾動效果，僅3行代碼
js實現的類marquee水平循環滾動
javascript 模擬Marquee文字向左均勻滾動代碼
本文介紹的關于node.js中間件express-session的相關內容，分享出來供大家從參考學習，下面來一起看看詳細的介紹：
一、為什么使用session?
session運行在服務器端，當客戶端第一次訪問服務器時，可以將客戶的登錄信息保存。
當客戶訪問其他頁面時，可以判斷客戶的登錄狀態，做出提示，相當于登錄攔截。
session可以和Redis或者數據庫等結合做持久化操作，當服務器掛掉時也不會導致某些客戶信息(購物車)丟失。
二、session的工作流程：