来源：未知 时间：2015-07-14 15:27 作者：xxadmin 阅读:次
[导读] Marquee 模仿IE下面的marquee效果，鼠标移上去暂停。形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部，用append和prepend模拟数组的push()和shift()。 代码如下: HTML...
|
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); |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
