【问题标题】:Can I give a button two commands with javascript?我可以用javascript给一个按钮两个命令吗?
【发布时间】:2013-02-19 16:46:18
【问题描述】:

我创建了一个页面,该页面分为七个部分和每个页面上的两个列 div。当我单击右按钮时,我滚动到下一列,当我单击左侧时,我滚动到左列。问题是,假设我在第一页,我从第二列滚动到第三列,我离开了页面,必须手动移动 x 滚动条。 有没有办法只对按钮进行编程以强制 x 溢出?

谢谢

CSS

<style>
#contents {
width: 3500px; <!--Total size of the large container-->
height: 200px;
position: absolute; }

#container {
height: 500px;
overflow: hidden;
position: relative;
border: 1px #000 solid;
   }
#container, .col {
width: 500px;<!--total size of each column.-->
}
.col {

float: left;
 }
</style>

HTML

  <!--Column 1--> 
  <div class="col">
<p>Put your content here...</p>
<button class="left">Left</button>
<button class="right">right</button>
 </div><!--end div column 1-->

我又做了 6 列。

JAVASCRIPT

<script>
   var colwidth = $('#container').width(),
contwidth = $('#contents').width(),
getOffset = function() {
    return parseInt($('#container').css('margin-left'));
};

 $(".left").click(function(){
if (getOffset() === 0) return false;

$("#contents").animate({left: '+=' + colwidth},500);
$("#container").animate({'margin-left': '-=' + colwidth},500);
});
$(".right").click(function(){
if (getOffset() === contwidth - colwidth) return false;

$("#contents").animate({left: '-=' + colwidth},500);
$("#container").animate({'margin-left': '+=' + colwidth},500);
});
</script>

【问题讨论】:

    标签: javascript html css button horizontal-scrolling


    【解决方案1】:

    要将多个函数分配给一次点击,您可以从现有函数中调用一个函数,或者创建一个专门用于调用其他 2 个函数的新函数。

    【讨论】:

    • 您也可以在onclick 中使用; 分隔函数调用,但这里看起来代码应该属于$(".left").click(function(){...}$(".right").click(function(){...}。但是,这并不能回答如何通过单击按钮以编程方式移动 x 滚动条的实际问题。
    猜你喜欢
    • 1970-01-01
    • 2015-05-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-13
    相关资源
    最近更新 更多