jQuery實現模擬marquee標簽效果

2024-05-06 16:23:07

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery實現模擬marquee標簽效果的相關資料,需要的朋友可以參考下

Marquee

模仿IE下面的marquee效果，鼠標移上去暫停。形成環的主要原理在于每張圖片一旦判斷出了外面的顯示窗口就添加到尾部，用append和prepend模擬數組的push()和shift()。

代碼如下:

HTML

<!doctype html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta content="" name="keywords" />

<meta content="" name="description" />

<meta name="author" content="codetker" />

<head>

<title>模擬marquee標簽效果的簡單實現</title>

<link href="style/reset.css" rel="stylesheet" type="text/css">

<link href="style/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/jquery.codetker.marquee.js"></script>

</head>

<body>

<div class="wrap">

<div class="marquee">

<ul>

<li>

<a href="" title="">1

<img src="images/test.jpg" alt="">

</a>

</li>

<li>

<a href="" title="">2

<img src="images/test.jpg" alt="">

</a>

</li>

<li>

<a href="" title="">3

<img src="images/test.jpg" alt="">

</a>

</li>

<li>

<a href="" title="">4

<img src="images/test.jpg" alt="">

</a>

</li>

<li>

<a href="" title="">5

<img src="images/test.jpg" alt="">

</a>

</li>

<li>

<a href="" title="">6

<img src="images/test.jpg" alt="">

</a>

</li>

<li>

<a href="" title="">7

<img src="images/test.jpg" alt="">

</a>

</li>

<li>

<a href="" title="">8

<img src="images/test.jpg" alt="">

</a>

</li>

</ul>

</div>

</div>

<script type="text/javascript">

$(document).ready(function(){

$(".marquee").marquee();

});

</script>

</body>

</html>

CSS

@charset "utf-8";

/* CSS Document */

body{

margin:0 0;

padding:0 0;

height:100%;

width:100%;

}

.wrap{

font-family:"微軟雅黑","宋體", Times, "Times New Roman", serif;

font-size:14px;

margin:0 0;

padding:0 0;

height:100%;

width:100%;

overflow:hidden;

}

.marquee{

margin: 0 auto;

width: 960px;

height: 300px;

overflow: hidden;

}

.marquee ul{

width: 10000px;

}

.marquee ul li{

float: left;

width: 500px;

text-align: center;

}

.marquee ul li a{

}

.marquee ul li a:hover{

color: red;

}

JavaScript

/*

* boxScroll 0.1

* 兼容IE8,FF,Chrome等常見瀏覽器

*/

;(function($,window,document,undefined){

//定義構造函數

var BoxObj=function(ele,opt){

this.$element=ele; //最外層對象

this.defaults={

'style': 0 ,//滾動樣式選擇,默認為普通效果

'speed': 1 ,//默認為1s

'direction': 'left'//默認為向左邊滾動

},

this.options=$.extend({},this.defaults,opt );

//這里可以添加一些通用方法

}

//給構造函數添加方法

BoxObj.prototype={

commonScroll:function(){

//接收對象屬性

var obj=this.$element;

var boxWindow=$(this.$element).children('ul');

var speed=this.defaults.speed;

var style=this.defaults.style;

var direction=(this.defaults.direction=='left')? 1 : -1;

var lists=$(boxWindow).children('li');

var len=$(lists).length;

var boxWidth=$(lists[0]).width();

var timer;

var step=(this.defaults.direction=='left')? 0 : boxWidth;

function move(style,speed,direction){

if (style==0) {

if (direction==1) {

step+=1;

if(step>boxWidth){

step-=boxWidth;

$(boxWindow).append($(boxWindow).children().eq(0));//將第一項放在最后，相當于push(0),shift()

}else{

$(obj).scrollLeft(step);

}

}else if (direction== -1) {

step-=1;

if(step<0){

step+=boxWidth;

$(boxWindow).prepend($(boxWindow).children().eq(len-1));//將最后一項放在最前，相當于pop(last),unshift()

}else{

$(obj).scrollLeft(step);

}

}else{//不執行之外的數值

}

}else{//留待擴展,多了改switch

}

}

timer=setInterval(function(){

move(style,speed,direction);

},10*speed); //由于時間取得小，肉眼就看不出來

$(lists).each(function() {//鼠標移上暫停

$(this).hover(function() {

clearInterval(timer);

}, function() {

clearInterval(timer);

timer=setInterval(function(){

move(style,speed,direction);

},10*speed);

});

});

}

}

$.fn.marquee=function(options){

//創建實體

var boxObj=new BoxObj(this,options);

//用尾調的形式調用對象方法

return boxObj.commonScroll();

}

})(jQuery,window,document);