关于javascript中菜单栏过长 实现左右箭头滑动项~

JavaScript09

关于javascript中菜单栏过长 实现左右箭头滑动项~,第1张

<style>

ul{

margin:0px

padding:0px

}

li{

float:left

cursor:pointer

}

.map_div{

width:900px

height:40px

background-color:#000000

overflow:hidden

}

#dh_li{

width:800px

height:40px

background-color:#000000

white-space:nowrap

text-overflow:ellipsis

overflow:hidden

text-overflow:ellipsis

display:block

after:content:"..."

}

#dh_li li{

width:150px

height:40px

background-color:#000000

color:#FF0000

border-right:1px solid #FF0000

text-align:center

padding-top:10px

overflow:hidden

}

#dh_li li a:link{

color:#FF0000

}

#dh_li li a:visited{

color:#FF0000

}

#dh_li li a:hover{

color:#FF0000

}

.dh_li{

width:50px

height:40px

font-size:20px

font-weight:bold

color:#FF0000

text-align:center

padding-top:10px

background-color:#CCCCCC

}

</style>

<body>

<div class="map_div">

<ul>

<li id="dh_li">

<div style="width:1500px">

<ul>

<li><a href="#">网站首页</a></li>

<li><a href="#">公司简介</a></li>

<li><a href="#">产品展示</a></li>

<li><a href="#">新闻咨询</a></li>

<li><a href="#">热点咨询</a></li>

<li><a href="#">合作伙伴</a></li>

<li><a href="#">网站论坛</a></li>

<li><a href="#">在线咨询</a></li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

</li>

<li id="left_" class="dh_li" onclick="move_left()">←</li>

<li id="right_" class="dh_li" onclick="move_right()">→</li>

</ul>

</div>

</body>

<script>

var demo=document.getElementById("dh_li")

function move_right()

{

if(dh_li.scrollLeft<=(1500-800))

dh_li.scrollLeft+=150

}

function move_left()

{

if(dh_li.scrollLeft>=0)

dh_li.scrollLeft-=150

}

</script>

您好,请问您是安卓的设备吗?若是,如您需要关闭左右滑屏前进后退功能,建议您可以打开uc浏览器-菜单-设置--网页浏览设置-关闭左右滑屏前进后退即可。以上若无法解决您的问题,或者理解错了您的意思,请尽快联系我们的在线客服反馈喔:打开uc浏览器菜单--设置--帮助与反馈--页面底部--在线人工客服(早上9:00~晚上12:00)

设置一个定时器,setInterval(fnSlide,'50'),后面一个参数是控制定时器执行间隔的。你可以定义一个函数 function fnSlide(){},在这个函数里面去去需要滑动的dom元素,每次把它的left 加或着减一个值,用if控制下终点。就可以了。比如是一个id为div1的div元素

var timer=setInterval(fnSlide,'50')//这里对定时器做一个标记

function fnSlide(){

var target=500//这里是定义的滑动终点的left值,假定是500

var oDiv=document.getElementById("div1")

var left=oDiv.offsetLeft

if(left<=target){

left+=5

}

else{

clearinterval(timer)//如果到终点就把定时器关掉

}

oDiv.style.left=left+'px'

}