生活随笔
收集整理的這篇文章主要介紹了
js扩展滚动窗口小插件实现文字左右上下滚动效果实例
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
方法一：使用小插件實(shí)現(xiàn)，兼容很好
插件代碼如下：
(function($) { $.fn.jMarquee = function(o) {o = $.extend({ speed:50, step:1,//速度 direction:"up",//方向 visible:1//數(shù)量 }, o || {})//配置參數(shù)var i=0var div=$(this)var ul=$("ul",div)var tli=$("li",ul)var liSize=tli.size()if(o.direction=="left")tli.css("float","left")var liWidth=tli.innerWidth()var liHeight=tli.height()var ulHeight=liHeight*liSizevar ulWidth=liWidth*liSize//寫(xiě)入if(liSize>o.visible){ul.append(tli.slice(0,o.visible).clone()) //重寫(xiě)htmlli=$("li",ul)liSize=li.size()//寫(xiě)css樣式div.css({"position":"relative",overflow:"hidden"})ul.css({"position":"relative",margin:"0",padding:"0","list-style":"none"})li.css({margin:"0",padding:"0","position":"relative"})switch(o.direction){ case "left": div.css("width",(liWidth*o.visible)+"px") ul.css("width",(liWidth*liSize)+"px") li.css("float","left") break case "up": div.css({"height":(liHeight*o.visible)+"px"}) ul.css("height",(liHeight*liSize)+"px") break }var MyMar=setInterval(ylMarquee,o.speed)ul.hover( function(){clearInterval(MyMar) function(){MyMar=setInterval(ylMarquee,o.speed) ) } function ylMarquee(){ if(o.direction=="left"){ if(div.scrollLeft()>=ulWidth){ div.scrollLeft(0) } else { var leftNum=div.scrollLeft() leftNum+=parseInt(o.step) div.scrollLeft(leftNum) } } if(o.direction=="up"){ if(div.scrollTop()>=ulHeight){ div.scrollTop(0) } else{ var topNum=div.scrollTop() topNum+=parseInt(o.step) div.scrollTop(topNum) } } } } })(jQuery)//調(diào)用
$(document).ready(function(){ //.stroll1是div里面帶一個(gè)ul就行了，里面的數(shù)據(jù)使用php調(diào)取 $(".stroll1").jMarquee({visible:4,step:1,direction:"up"}) $(".stroll2").jMarquee({visible:4,step:1,direction:"up"}) $(".stroll3").jMarquee({visible:4,step:1,direction:"up"}) })
方法二：css3加js實(shí)現(xiàn)，轉(zhuǎn)載自靖鳴君博客
js代碼：
var Marquee =
function(){this.direction =
"top";
this.speed =
30;
};Marquee.prototype = {init:
function(obj, setttings){this.obj = obj;
this._createBox();
this.scroll();
if(settings){settings.direction && (
this.direction = settings.direction);settings.speed && (
this.speed = settings.speed);}},_createBox:
function(){this.iBox = document.createElement(
"div");
var iBox =
this.iBox;
with(iBox.style){width =
"100%";height =
"100%";overflow =
"hidden";}iBox.setAttribute(
"id",
"marqueeBoxA");iBox.innerHTML = obj.innerHTML;
var iBox2 = iBox.cloneNode(
true);iBox2.setAttribute(
"id",
"marqueeBoxB");
this.obj.innerHTML =
"";
this.obj.appendChild(iBox);
this.obj.appendChild(iBox2);},scroll:
function() {var _self =
this;
this.timer = setInterval(
function(){_self._ani();},
this.speed);},_ani:
function() {if(obj.clientHeight - obj.scrollTop <=
0){obj.scrollTop = obj.offsetHeight - obj.scrollTop +
1;}
else {obj.scrollTop++;console.log(obj.offsetHeight, obj.scrollTop);}},stop:
function(){clearInterval(
this.timer);},start:
function(){this.scroll();}
};
html對(duì)應(yīng)代碼
<!DOCTYPE HTML>
<html>
<head> <meta charset="UTF-8"> <title>Demo
</title><style type="text/css">#box { width: 150px;height: 200px;border:1px solid #EFEFEF;background: #F8F8F8;padding:0 20px;line-height:22px;overflow:hidden;}</style>
</head><body><div id="box">我是靖鳴君1
<br /> 我是靖鳴君2
<br /> 我是靖鳴君3
<br /> 我是靖鳴君4
<br /> 我是靖鳴君5
<br />我是靖鳴君1
<br /> 我是靖鳴君2
<br /> 我是靖鳴君3
<br /> 我是靖鳴君4
<br /> 我是靖鳴君5
<br /></div>
</body>
</html>
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔為你收集整理的js扩展滚动窗口小插件实现文字左右上下滚动效果实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
