首页新闻找找看学习计划

导航栏,带有左右箭头,点击箭头,可以移动导航的栏目,如图所以,求大神赐教

0
悬赏园豆:200 [已解决问题] 解决于 2017-01-05 13:40

导航栏有左右两个箭头,导航文字较多时,如何点击左右箭头调整文字的位置图片

问题补充:

这种导航怎么做?请问有大神在吗?可否写下完整的代码?

mayan马燕的主页 mayan马燕 | 初学一级 | 园豆:3
提问于:2017-01-04 17:32
< >
分享
最佳答案
0

var ul=document.getElementById('ul1');

var len=ul.getElementByTagName('li');

var prevbtn=document.getElementById('prevbtn');

var nextbtn=document.getElementById('nextbtn');

var width=100;

var num=0;

nextbtn.onclick=function(){

 if(num<len-11){

  num++;

  ul.style.left=-(num*width)+'px';

};

};

 

收获园豆:200
莫璃 | 菜鸟二级 |园豆:402 | 2017-01-04 18:08

我来试试,真心感谢您哦

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:09

请问怎么换成offsetWidth

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:27

@mayan马燕: for(var i=0;i<len.length;i++){

 len[i].width=len[i].offsetwidth;

}

莫璃 | 园豆:402 (菜鸟二级) | 2017-01-04 18:29

@莫璃: 恩恩,谢谢啦

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:30

@莫璃: 我来试试

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:30

@莫璃: 可否写个完整的例子看看?

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:38

@莫璃: ul.getElementByTagName is not a function为什么报这种类型的错误?

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:42

@mayan马燕: var oDiv=document.getElementById('box');
var ul=oDiv.getElementsByTagName('ul')[0];
var aLi=oDiv.getElementsByTagName('li');
var ulWidth=0;
for(var i=0;i<aLi.length;i++){
aLi[i].W=aLi[i].offsetWidth;
ulWidth =aLi[i].offsetWidth+ulWidth;
}
ul.style.width=ulWidth+"px";

莫璃 | 园豆:402 (菜鸟二级) | 2017-01-04 18:56

@莫璃: 貌似可以了,还有小问题,我再改改,不懂得再来请教你

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:58

@莫璃: 他变成了这个样子,我想实现,左边的点击向左按钮,然后右边被隐藏的就出来了一个,左边的第一个就隐藏起来

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 19:03

@莫璃: 在吗?亲

mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 19:39

@mayan马燕: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; padding: 0;}
       #box{ position: relative; width: 500px; overflow: hidden; line-height: 60px; margin: 100px auto; background: #000; padding-bottom: 150px;}
        #box ul li{ float: left; padding: 0 20px; color: #fff; font-size: 16px; list-style: none;}
        #box ul{ position: absolute; left: 0; transition: 1s;}
        input{ position: absolute;left:50px; top:60px;;}
        #rightBtn{ left: 90px;}
    </style>
</head>
<body>

<div id="box">
    <ul>
        <li>暴君</li>
        <li>javascript</li>
        <li>html5+css3</li>
        <li>暴君</li>
        <li>javascript</li>
        <li>html5+css3</li>
        <li>暴君</li>
        <li>javascript</li>
        <li>html5+css3</li>
    </ul>
    <input  value="向左" id="leftBtn" type="button"/>
    <input  value="向左" id="rightBtn" type="button"/>
</div>
<script>
    var oDiv=document.getElementById('box');
    var ul=oDiv.getElementsByTagName('ul')[0];
    var aLi=oDiv.getElementsByTagName('li');
    var leftBtn=document.getElementById('leftBtn');
    var rightBtn=document.getElementById('rightBtn');
    var ulWidth=0;
    var cc=0;
    var num=0;
    var leftArr=[];

    for(var i=0;i<aLi.length;i++){
         aLi[i].W=aLi[i].offsetWidth;
         ulWidth =aLi[i].offsetWidth+ulWidth;
    }
    function numIndex(){
        var arr=[];
        var bb=0;
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            cc=aLi[i].offsetWidth+cc;
            if(cc>500){
                bb=cc-500;
                arr.push(bb);
            }
        }
        return arr;

    }
    leftArr=numIndex();
    ul.style.width=ulWidth+"px";
    rightBtn.onclick=function(){
        ul.style.left=-leftArr[num]+'px';
        console.log(leftArr[num]);
       ++num;
        if(num>leftArr.length-1){
            alert("最后一个");
            num=leftArr.length-1;
            return;
        }

    };
    leftBtn.onclick=function(){
     --num;
     ul.style.left=-leftArr[num]+'px';
        if(num<0){
            num=0;
            alert("最左边了");
            return;
        }

    }



</script>
</body>
</html>
莫璃 | 园豆:402 (菜鸟二级) | 2017-01-05 10:11
其他回答(5)
0

m没图.

1

吴瑞祥 | 园豆:28770 (高人七级) | 2017-01-04 17:35

您好,我刚刚上传了图片,你刷新一下

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 17:36

在吗?比较急,能否帮帮忙

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 17:36

@mayan马燕: 是一个ul.通过js把第一个li拿出来放到最后一个就行了

支持(0) 反对(0) 吴瑞祥 | 园豆:28770 (高人七级) | 2017-01-04 17:47

@吴瑞祥: 可以写段代码给我看看吗?拜托了

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 17:52

@吴瑞祥: 在吗?亲

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 20:14
0

1.对里面的用transform。
2.里面的绝对定位,跳转left,right等
不要影响到外面的就好

赵大仙 | 园豆:206 (菜鸟二级) | 2017-01-04 17:44

可以写段代码给我看看吗?拜托了

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 17:52

<div ><ul><ul></div>
div 用position:relative  ul用absolute  。点击按钮的时候, ul改变left,right的值。。。。。

支持(0) 反对(0) 赵大仙 | 园豆:206 (菜鸟二级) | 2017-01-04 17:57

@赵大仙: 

<!--导航栏-->
<div class="nav">
<ul>
<li class="qiye"><a href="">企业监管</a></li>
<li class="jishu"><a href="">技术服务机构</a></li>
<li class="yinhuan"><a href="">隐患排查</a></li>
<li class="xingzheng"><a href="">行政执法</a></li>
<li class="zhengfu"><a href="">政府办公</a></li>
<li class="yingji"><a href="">应急管理</a></li>
<li class="shigu"><a href="">事故快报</a></li>
<li class="luoshi"><a href="">落实企业主体责任</a></li>
<li class="zhishi"><a href="">知识库</a></li>
<li class="xingzhengxuke"><a href="">行政许可</a></li>
<li class="shuju"><a href="">数据挖掘</a></li>
</ul>
</div>

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 17:59

是不是要用js呀

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 17:59

@mayan马燕: 对呀,点击事件嘛

支持(0) 反对(0) 赵大仙 | 园豆:206 (菜鸟二级) | 2017-01-04 18:00

@赵大仙: 可不可以写一下代码给我参考一下?您说的我不会做尼

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:01

@mayan马燕: 用了jq没

支持(0) 反对(0) 赵大仙 | 园豆:206 (菜鸟二级) | 2017-01-04 18:05

@赵大仙: 可以引入jQuery,您能写下代码吗?

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:06

@mayan马燕: 定了宽度,超出的隐藏,通过左右箭头,控制宽度内展示的内容对吧。点击一下刚好就跳动一个导航块儿的宽度?html结构包括下按钮的看下呢

支持(0) 反对(0) 赵大仙 | 园豆:206 (菜鸟二级) | 2017-01-04 18:12

@赵大仙: 

<!--导航栏-->
<div class="nav">
<div class="prevbtn">
<img src="img/prevbtn.png" onclick="prevbtn();"/>
</div>
<ul id="ul1">
<li class="qiye"><a href="">企业监管</a></li>
<li class="jishu"><a href="">技术服务机构</a></li>
<li class="yinhuan"><a href="">隐患排查</a></li>
<li class="xingzheng"><a href="">行政执法</a></li>
<li class="zhengfu"><a href="">政府办公</a></li>
<li class="yingji"><a href="">应急管理</a></li>
<li class="shigu"><a href="">事故快报</a></li>
<li class="luoshi"><a href="">落实企业主体责任</a></li>
<li class="zhishi"><a href="">知识库</a></li>
<li class="xingzhengxuke"><a href="">行政许可</a></li>
<li class="shuju"><a href="">数据挖掘</a></li>
<li class="qiye1"><a href="">企业监管1</a></li>
<li class="jishu1"><a href="">技术服务机构1</a></li>
<li class="yinhuan1"><a href="">隐患排查1</a></li>
</ul>
<div class="nextbtn">
<img src="img/nextbtn.png" />
</div>
</div>

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:56
0

 点击箭头的时候改变菜单的定位坐标啊

balahoho | 园豆:2138 (老鸟四级) | 2017-01-04 17:44

可以写段代码给我看看吗?拜托了

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 17:52

@mayan马燕: 以楼上的html结构为例,改变UL的left值,如果导航固定显示8个,然后超过八个点击右边按钮改变ul的left值等于1个LI的宽度.点击一次加一个LI的宽度,代码的思路就是这样了

支持(0) 反对(0) balahoho | 园豆:2138 (老鸟四级) | 2017-01-04 18:03

@balahoho: 您好,可是我的li没有设置宽度,不好设置宽度,因为每一个导航文字的内容不一样,宽度不好确定大小

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:05

@mayan马燕: 那就在改变坐标时手动获取下一个li的宽度

支持(0) 反对(0) balahoho | 园豆:2138 (老鸟四级) | 2017-01-04 18:09

那你只能计算当前LI和下一个LI的大小,然后在移动了,offsetWidth

支持(0) 反对(0) 莫璃 | 园豆:402 (菜鸟二级) | 2017-01-04 18:12

@莫璃: 我来试试,那多出来的li怎么隐藏掉?

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:13

@mayan马燕: UL外面有一定有一个DIV,然后超出隐藏

支持(0) 反对(0) 莫璃 | 园豆:402 (菜鸟二级) | 2017-01-04 18:15

@莫璃: 哦哦哦,我来试试

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 18:15
0

这个要百度的话,应该怎么搜索


mayan马燕 | 园豆:3 (初学一级) | 2017-01-04 20:44

怀疑你会不会结贴?

支持(0) 反对(0) 无影飞絮剑 | 园豆:1155 (小虾三级) | 2017-01-05 09:25
0

https://w.chesudi.com/Online/searchstore.html 参考这个页面

<span class="icon icon-left"></span>
.icon-left::before {
    font-size: .8rem;
    content: "\e61d";
}

.icon {
    font-family: "iconfont" !important;
    font-size: .8rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

 

无影飞絮剑 | 园豆:1155 (小虾三级) | 2017-01-05 09:29

不是这样的,能不能再帮我看看?

支持(0) 反对(0) mayan马燕 | 园豆:3 (初学一级) | 2017-01-05 09:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册