html5 菜单左右滑动

html-css010

html5 菜单左右滑动,第1张

可以放到移动端的html5动画切换效果

默认也可以自动切换

支持鼠标点击拖动、滑动

将head中的样式引入到你的样式表中

将body中需要的代码部分拷贝过去即可

1.基本语法

<marquee>滚动文字 </marquee>

2.文字移动属性的设置

(1)滚动方向属性direction

可以设定文字滚动的方向,分别为向左(left)、向右(right)、向上(up)、向下(down),使滚动的文字具有更多的变化。

基本语法:

<marquee direction="value">滚动文字</marquee>

(2)滚动方式属性behavior

通过这个属性能够设定不同方式的滚动文字效果。如滚动的循环往复、交替滚动、单次滚动等。

基本语法:

<marquee behavior="value">滚动文字</marquee>

(3)滚动循环属性loop

通过这个属性能够让文字滚动循环进行。

基本语法:

<marquee loop="次数">滚动文字</marquee>

(4)滚动速度属性scrollamout

通过这个属性能够调整文字滚动的速度。

基本语法:

<marquee scrollamount="value">滚动文字</marquee>

(5)滚动延迟属性scrolldelay

通过这个属性,可以在每一次滚动的间隔产生一段时间的延迟。

基本语法:

<marquee scrolldelay="value">滚动文字</marquee>

3.外观(Layout)设置

(1)滚动文字对齐方式align

基本语法:

<marquee align="对齐方式">滚动文字</marquee>

对方方式=top、middle、bottom,对齐上沿、中间、下沿。

(2)滚动背景颜色属性bgcolor

在滚动文字的后面,可以添加背景颜色。

基本语法:

<marquee bgcolor="color_value">滚动文字</marquee>

这问题好纠结,最少来个截图啊,给你写个吧,粘过去就行,不行的话留个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>