jquery 点击按钮 菜单元素超出部分横向滚动显示

作者: wxfeng 分类: web前端 发布时间: 2017-03-13 00:00    阅读 27 次

效果:点击右侧三角形按钮,滚动显示隐藏的剧集菜单;

blob.png

blob.png

实现思路:设置子元素超出部分不显示且不换行,点击按钮时,使用js设置其父级元素的相对位置,使其横向偏移即可显示超出的元素。

HTML:

   起初html代码如下,即 h3 标签父级元素只有一层,这时若对 <div class="seasonitem"> 设置css样式“超出部分隐藏且不换行”,只能将超出<div class="seasonitem">的h3元素隐藏,但并不能达到强制不换行的结果。原因:h3为块级元素,对其设置强制不换行无效。因为换行,这时即使点击后滚动,也并不能使超出部分显示。

    <span class="rightBtn">◂</span>
            <div class="seasonitem">
                <h3 onclick="Ajxseason(this)" id="11">第11季▼</h3>
                <h3 onclick="Ajxseason(this)" id="10">第10季</h3>
                <h3 onclick="Ajxseason(this)" id="9">第9季</h3>
                <h3 onclick="Ajxseason(this)" id="8">第8季</h3>
                <h3 onclick="Ajxseason(this)" id="7">第7季</h3>
                <h3 onclick="Ajxseason(this)" id="6">第6季</h3>
                <h3 onclick="Ajxseason(this)" id="5">第5季</h3>
                <h3 onclick="Ajxseason(this)" id="3">第3季</h3>
                <h3 onclick="Ajxseason(this)" id="2">第2季</h3>
                <h3 onclick="Ajxseason(this)" id="0">合集</h3>
                <h3 class="curseason" id="-1">其它</h3>
            </div>
   <span class="leftBtn">▸</span>

解决方法:在<div class="seasonitem"> 外层添加一层父级元素<div class="seasondiv">,然后对其设置css样式“超出部分隐藏且不换行”,并使 <div class="seasonitem">宽度尽可能长,保障其子元素无需换行,即可达到预期效果。

    <span class="rightBtn">◂</span>
        <div class="seasondiv">
            <div class="seasonitem">
                <h3 onclick="Ajxseason(this)" id="11">第11季</h3>
                <h3 onclick="Ajxseason(this)" id="10">第10季</h3>
                <h3 onclick="Ajxseason(this)" id="9">第9季</h3>
                <h3 onclick="Ajxseason(this)" id="8">第8季</h3>
                <h3 onclick="Ajxseason(this)" id="7">第7季</h3>
                <h3 onclick="Ajxseason(this)" id="6">第6季</h3>
                <h3 onclick="Ajxseason(this)" id="5">第5季</h3>
                <h3 onclick="Ajxseason(this)" id="3">第3季</h3>
                <h3 onclick="Ajxseason(this)" id="2">第2季</h3>
                <h3 onclick="Ajxseason(this)" id="0">合集</h3>
                <h3 class="curseason" id="-1">其它▼</h3>
            </div>
        </div>
        <span class="leftBtn">▸</span>

CSS:

.seasondiv{
  float:left;
  width:920px;
  height:56px;
  white-space:nowrap;
  overflow:hidden;
}
.seasonitem{
  float:left;
  width:3000px;
  height:56px;
  white-space:nowrap;
  overflow:hidden;
}
.leftBtn{
  width:50px;
  height:56px;
  float:right;
  font-size:20px;
  line-height: 56px;
  text-align: center;
  cursor:pointer;
  margin-right:20px;
}
.rightBtn{
  width:50px;
  height:56px;
  float:left;
  font-size:20px;
  line-height: 56px;
  text-align: center;
  cursor:pointer;
  display:none;
}

JS:

<script type="text/javascript">
jQuery(document).ready(function () {
    //向左按钮点击事件
    var index = 0;
    var liLen;
    $(".leftBtn").click(function(){
        index++;
        liLen = $(".seasonitem h3").length;
        if(index >= 4)
        {
            $(".seasonitem").stop();
	    $(".rightBtn").show();
            index = 3;
        }else{
            if(index == 1)
            {
                $(".seasonitem").animate({"margin-left":-index*90},970);
            }else{
                $(".seasonitem").animate({"margin-left":-index*90},970);
            }
        }
    });
    //向右按钮点击事件
    $(".rightBtn").click(function(){
        if(index == 0)
        {
            $(".seasonitem").stop();
        }else{
            index--;
            if(index == 0)
            {
                $(".seasonitem").animate({"margin-left":-index*90},970);
            }else{
                $(".seasonitem").animate({"margin-left":-index*90},970);
            }
        }
    });
});
</script>

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注