具体代码如下：
<!doctype html>
<html>
<head>
<title></title>
<style>
#slides{
position:absolute
left:0px
top:0px
height:100%
width:100%
overflow:hidden
}
.slide{
position:absolute
height:600px
width:800px
opacity:0.7
background-color:rgba(0, 128, 196, 0.5) !important
background-color:#ccc
border-radius:10px
left:50%
top:50%
margin-top:-300px
box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5)
transition:all 0.25s ease-in-out 0s
}
.current{
opacity:1
margin-left:-400px
}
.future{
margin-left:450px
transform: skew(-3deg) scale(0.8)
-webkit-transform: skew(-3deg) scale(0.8)
}
.post{
margin-left:-1250px
transform: skew(3deg) scale(0.8)
-webkit-transform: skew(3deg) scale(0.8)
}
.far-future{
margin-left:1200px
transition:none
}
</style>
</head>
<body>
<div id="slides">
<div class="slide current">1</div>
<div class="slide future">2</div>
<div class="slide far-future">3</div>
<div class="slide far-future">4</div>
<div class="slide far-future">5</div>
<div class="slide far-future">6</div>
<div class="slide far-future">7</div>
</div>
<script>!function(){ var slides = document.getElementById("slides").childNodes
var l = slides.lengthfunction fslide(e){ var event = e || window.event
//console.log(event.wheelDelta +" "+ event.detail)for(var i=0i<li++)
{ if(slides[i].className=="slide current")
{ var current_slide = slides[i]break
}
}
//var current_slide = document.getElementsByClassName("current")[0]
// getElementsByClassName只有火狐，谷歌等浏览器的较新版本支持
if
((event.wheelDelta <0 /*ie,谷歌等浏览器*/ || event.detail >0 /*firefox*/) &&nextel(current_slide)){
if(prevel(current_slide)){ prevel(current_slide).className="slide far-future"}
current_slide.className="slide post"nextel(current_slide).className="slide current"
if(nextel(nextel(current_slide)))
{
nextel(nextel(current_slide)).className="slide future"}
}
else if((event.wheelDelta >0 || event.detail <0) &&prevel(current_slide)){
if(nextel(current_slide)){ nextel(current_slide).className="slide far-future"}
current_slide.className="slide future"prevel(current_slide).className="slide current"
if(prevel(prevel(current_slide))){ prevel(prevel(current_slide)).className="slide post"
}
}
}
document.onmousewheel = fslide
// ie,谷歌等浏览器 if(document.addEventListener)
{ document.addEventListener("DOMMouseScroll",fslide,false)
// firefox } }()function prevel(el){ if(el.previousSibling == null)
return nullreturn el.previousSibling.nodeType == 1 ? el.previousSibling : prevel(el.previousSibling)
}
function nextel(el){ if(el.nextSibling == null)
return nullreturn el.nextSibling.nodeType == 1 ? el.nextSibling : nextel(el.nextSibling)
} </script>
</body>
</html>
向上滚动<marquee direction="up">滚动内容</marpuee>向上滚动<marquee direction="down">滚动内容</marpuee>
向左滚动<marquee direction="left">滚动内容</marpuee>
向右滚动<marquee direction="right">滚动内容</marpuee>
基本语法
<marquee>... </marquee>
移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等
方向
<direction=#>#=left, right ,up ,down <marquee direction=left>从右向左移！</marquee>
方式
<bihavior=#>#=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>来回走</marquee>
循环
<loop=#>#=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee><P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>
速度
<scrollamount=#><marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>
延时
<scrolldelay=#><marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#>#=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
底色
<bgcolor=#>#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee>
面积
<height=# width=#><marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>
<marquee behavior="alternate">来回滚动</marquee> <marquee behavior="scroll">单方向循环滚动</marquee> <marquee behavior="scroll" direction="up" height="30">改单方向向上循环滚动</marquee> <marquee behavior="slide">只滚动一次</marquee> <marquee behavior="slide" direction="up">改向上只滚动一次了</marquee> <marquee behavior=="slide" direction="left" bgcolor="red">背景色是红色的</marquee> <marquee direction="right">向右滚动</marquee>欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）