Javascript 如何在用手指滑动内容时水平向左或向右滚动内容_Javascript_Jquery_Css_Html_Twitter Bootstrap

Javascript 如何在用手指滑动内容时水平向左或向右滚动内容

javascript jquery css html twitter-bootstrap

Javascript 如何在用手指滑动内容时水平向左或向右滚动内容,javascript,jquery,css,html,twitter-bootstrap,Javascript,Jquery,Css,Html,Twitter Bootstrap,我正在开发移动应用程序，我想在div中滑动图像，当用户用手指滑动时，div应该滚动。但在我的示例中，整个页面都在滚动div。我希望我的div像这样滚动“” ` jQuery SmoothTouchScroll  <link rel="Stylesheet" type="text/css" href="../css/smoothTouchScroll.css" /> &

我正在开发移动应用程序，我想在

div

中滑动图像，当用户用手指滑动时，

div

应该滚动。但在我的示例中，整个页面都在滚动

div

。我希望我的

div

像这样滚动“” ` jQuery SmoothTouchScroll

    <!-- the CSS for Smooth Touch Scroll -->
    <link rel="Stylesheet" type="text/css" href="../css/smoothTouchScroll.css" />

    <!-- Styles for my specific scrolling content -->
    <style type="text/css">
        #touchScroller
        {
        top:70%;
            width:100%;
            height: 30%;
            /* position: relative; */
            position:absolute;
            background-color:red;
        }

        /* Replace the last selector for the type(s) of element(s) you have in
           your scroller.
           If you have images use #touchScroller div.scrollableArea img,
           If you have div's use #touchScroller div.scrollableArea div,
           if you have links use #touchScroller div.scrollableArea a,
           or add several selectors if you have mixed content
           ...and so on. */
        #touchScroller div.scrollableArea a
        {
            position: absolute;
            float: left;
            margin: 0;
            padding: 0 5px;
            /* If you don't want the images in the scroller to be selectable, try the following
               block of code. It's just a nice feature that prevent the images from
               accidentally becoming selected/inverted when the user interacts with the scroller. */
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            overflow-x: scroll;
            overflow-y: hidden;
white-space: nowrap;
        }

    </style>
    <!-- jQuery - Get it from Google API's -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- jQuery UI - contains only widget -->
    <script src="../js/jquery-ui-1.10.3.custom.min.js"></script>
    <!-- jQuery kinetic -->
    <script src="../js/jquery.kinetic.min.js"></script>
    <!-- Smooth Touch Scroll -->
    <script src="../js/jquery.smoothTouchScroll.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<p style="position:fixed"> Welcome to yourStory Pvt Ltd </p>
    <div id="touchScroller">
        <a href="#"><img src="images/field.jpg" alt="Demo image" id="field" style="left:0%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>
        <a href="#"><img src="images/gnome.jpg" alt="Demo image" id="gnome" style="left:30%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>
        <a href="#"><img src="images/pencils.jpg" alt="Demo image" id="pencils" style="left:60%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>
        <a href="#"><img src="images/golf.jpg" alt="Demo image" id="golf" style="left:90%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>
        <a href="#"><img src="images/river.jpg" alt="Demo image" id="river" style="left:120%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>
        <a href="#"><img src="images/train.jpg" alt="Demo image" id="train" style="left:150%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>
        <a href="#"><img src="images/leaf.jpg" alt="Demo image" id="leaf" style="left:180%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>
        <a href="#"><img src="images/dog.jpg" alt="Demo image" id="dog" style="left:210%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>
    </div>

    <script>
        $(function() {

            $("#touchScroller").smoothTouchScroll({ continuousScrolling: true });
        });
    </script>
</body>


#触摸屏
{
最高：70%；
宽度：100%；
身高：30%；
/*位置：相对位置*/
位置：绝对位置；
背景色：红色；
}
/*替换中元素类型的最后一个选择器
你的卷轴。
如果您有图像，请使用#touchScroller div.scrollableArea img，
如果您有div的use#touchScroller div.scrollableArea div，
如果您有链接，请使用#touchScroller div.scrollableArea，
如果您有混合内容，也可以添加多个选择器
……等等*/
#touchScroller分区可滚动区域a
{
位置：绝对位置；
浮动：左；
保证金：0；
填充：0 5px；
/*如果不希望滚动条中的图像是可选择的，请尝试以下操作
代码块。这只是一个很好的功能，可以防止图像丢失
当用户与滚动条交互时，意外地被选中/反转*/
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-o-用户选择：无；
用户选择：无；
溢出-x：滚动；
溢出y：隐藏；
空白：nowrap；
}
欢迎来到yourStory私人有限公司
$（函数（）{
$（“#TouchScroll”）.smoothTouchScroll（{continuousScrolling:true}）；
});

首先，你把它放进另一个分区。并根据您的意愿在页面中放置“sliderdiv”。
把你的风格改成下面提到的。不要将触摸屏置于绝对位置。
#touchScroller{宽度：100%；高度：330px；位置：相对；背景色：红色；}
#touchScroller div.scrollableArea{位置：相对；浮动：左；边距：0；填充：0 5px；-webkit用户选择：无；-khtml用户选择：无；-moz用户选择：无；-o用户选择：无；用户选择：无；溢出-x:滚动；溢出-y:隐藏；空白：nowrap；}

hi robjez，我已经按照您的要求完成了，但是当我滚动整个图像页面时，会得到滚动。我只希望内部div应该滚动。这不是我想要的。是否有其他方法，请帮助我。提前谢谢

first you put <div id="touchScroller"> inside another div ie <div class="sliderdiv"><div id="touchScroller"></div><div>. and place the 'sliderdiv' as per your wish in your page.
and change your style to below mentioned . dont give your touchScroller to position absolute.

     #touchScroller { width: 100%; height: 330px; position: relative; background-color: red; }
     #touchScroller div.scrollableArea a { position: relative; float: left; margin: 0; padding: 0 5px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; }