◎ direction表示滚动的方向，值可以是left，right，up，down，默认为left
◎ behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
◎ loop表示循环的次数，值是正整数，默认为无限循环
◎ scrollamount表示运动速度，值是正整数，默认为6
◎ scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒
◎ align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
◎ bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
◎ height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度
◎ hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
◎ onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。
这问题好纠结，最少来个截图啊，给你写个吧，粘过去就行，不行的话留个q，继续问
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>选项卡</title>
<style type="text/css">
::-webkit-scrollbar{width:0px}
*{ margin:0 padding:0}
ul{
list-style: none
}
.tab{
width: 600px
margin: 80px auto
}
.tab .tab_menu{
float:left
height: 138px
width: 90px
overflow-y:scroll
}
.tab .tab_menu ul{width:60px}
.tab .tab_menu ul li{
width: 60px
text-align: center
line-height: 30px
}
.tab .tab_menu ul li:last-child{
border-right:none
width:60px
}
.tab .tab_menu ul li.on{
background: #999
}
.tab_box{float:left}
.tab .tab_box > div{
width: 300px
height: 138px
border:1px solid #6cf
display: none //将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来
}
.tab .tab_box > div:first-child{
display: block
}
</style>
</head>
<body>
<!--整体构局说明，用ul完成按钮的横向布局，用div完成三个内容框架的垂直布局（类似于类表），然后将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来-->
<div class="tab">
<div class="tab_menu">
<ul>
<li class="on">实事</li>
<li>政治</li>
<li>体育</li>
<li>实事</li>
<li>政治</li>
<li>体育</li>
<li>实事</li>
<li>政治</li>
<li>体育</li>
<li>实事</li>
<li>政治</li>
<li>体育</li>
</ul>
</div>
<div class="tab_box">
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tab_menu ul li").click(function(){
$(this).addClass("on").siblings().removeClass("on") //切换选中的按钮高亮状态
var index=$(this).index() //获取被按下按钮的索引值，需要注意index是从0开始的
$(".tab_box > div").eq(index).show().siblings().hide() //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
})
})
</script>
</body>
</html>
实现原理：
1. 利用CSS3的@keyframes规则创建动画效果；
2. 使用CSS3的animation效果完成滚动切换。
1 @-webkit-keyframes scrollText2 {
2 0%{
3 -webkit-transform: translateX(0px)
4 }
5 20%{
6 -webkit-transform: translateX(-204px)
7 }
8 40%{
9 -webkit-transform: translateX(-408px)
10 }
11 60%{
12 -webkit-transform: translateX(-612px)
13 }
14 80%{
15 -webkit-transform: translateX(-816px)
16 }
17 100%{
18 -webkit-transform: translateX(-1020px)
19 }
20 }
21 @keyframes scrollText2 {
22 0%{
23 transform: translateX(0px)
24 }
25 20%{
26 transform: translateX(-204px)
27 }
28 40%{
29 transform: translateX(-408px)
30 }
31 60%{
32 transform: translateX(-612px)
33 }
34 80%{
35 transform: translateX(-816px)
36 }
37 100%{
38 transform: translateX(-1020px)
39 }
40 }
41
42 .box4{
43 position: absolute
44 top: 100px
45 left: 100px
46 width: 200px
47 height: 30px
48 overflow: hidden
49 }
50 .border4{
51 position: absolute
52 top: 0px
53 left: 0px
54 width: 1400px
55 -webkit-animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0)
56 animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0)
57 }
58 .border4 div{
59 height: 30px
60 width: 200px
61 overflow: hidden
62 display: inline-block
63 }
64 .border4:hover{
65 animation-play-state:paused
66 -webkit-animation-play-state:paused
67 }
CSS代码说明：
@-webkit-keyframes及@keyframes定义了从0% ~ 100%之间，每过20%的时间，向左移动204px，总共有6次移动；
.box4 定义外容器的基本属性
.border4 定义了内容器的属性，-webkit-animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 和 animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 定义了用12s种循环一次，无限循环的效果；
.border4 div 定义了纵向滚动内容的基本样式；
.border4:hover 定义了鼠标移入容器时的效果，animation-play-state:paused 及 -webkit-animation-play-state:paused 定义了动画暂停；
1 <div class="box4">
2 <div class="border4">
3 <div>This is a test 1.</div>
4 <div>This is a test 2.</div>
5 <div>This is a test 3.</div>
6 <div>This is a test 4.</div>
7 <div>This is a test 5.</div>
8 <div>This is a test 1.</div>
9 </div>
10 </div>
HTML代码说明：
定义了6条信息可以横向滚动，其中前5条是真正横向滚动的信息，第6条和第1条信息是一样的，原因和上一篇纵向滚动一样，因为使用了@keyframes方式来实现动画效果，第1条信息的效果是默认为停止的，所以用第6条信息制作一个替代方法，在第一次循环结束后，可以无缝继续滚动。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）