堆棧內存溢出
  簡體   English   中英

如何添加閾值onclick（）jQuery？

[英]How to add threshhold onclick() jQuery?

 原文  2014-03-19 14:20:55  2   2    javascript/ jquery/ css/ jquery-mobile/ cordova

問題描述

如何在滑塊中的圖像上添加點擊閾值？ 問題是，如果我通過單擊並拖動圖片將滑塊移至其他頁面，則會選擇該圖片。

我如何添加閾值或其他閾值，以便當我從一張幻燈片移動到另一張幻燈片時不會被選中？

第二個問題可能是：如何在不移動的情況下選擇圖像（因為如果我選擇一個圖像，另兩個圖像都在移動），並且我希望它們以滑動器為中心（它們與底部，頂部，左側和右側之間的距離相同）

我希望我使用jQuery和jQuery mobile的phonegap移動應用程序具有這種效果。 我也使用swiper插件。

這是代碼： http : //jsfiddle.net/alecstheone/pDNJ7/

HTML： 

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <img class="image" src="http://athleticsfrontier.com/wp-content/uploads/2010/07/cal-logo.jpg">
        <img class="image" src="http://rs1228.pbsrc.com/albums/ee443/aneesha_scott-morton/cute-puppies.jpg~c200">
        <img class="image" src="http://cdn3.www.babble.com/wp-content/uploads/2014/03/pup3-200x200.jpg">
      </div>
      <div class="swiper-slide blue-slide">
        <img class="image" src="http://th09.deviantart.net/fs47/200H/i/2012/019/4/c/husky_puppy_1341_by_sooper_husky-d274ud4.jpg">
        <img class="image" src="http://careforyourpuppy.org/wp-content/themes/headlines/thumb.php?src=wp-content/uploads/2010/12/puppy.jpg&w=200&h=200&zc=1&q=90">
        <img class="image" src="http://khloekardashian.celebuzz.com/wp-content/uploads/2013/03/Khloe-Kardashian-Lamar-Odom-New-Puppy-3-200x200.jpg">
      </div>
    </div>
    <div class="pagination"></div>
  </div>
</body>

CSS： 

/*
 * Swiper 2.5.1
 * Mobile touch slider and framework with hardware accelerated transitions
 *
 * http://www.idangero.us/sliders/swiper/
 *
.swiper-container {
    margin:0 auto;
    position:relative;
    overflow:hidden;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    /* Fix of Webkit flickering */
    z-index:1;
}
.swiper-wrapper {
    position:relative;
    width:100%;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease;

    -moz-transition-property:-moz-transform, left, top;
    -moz-transition-duration:0s;
    -moz-transform:translate3d(0px,0,0);
    -moz-transition-timing-function:ease;

    -o-transition-property:-o-transform, left, top;
    -o-transition-duration:0s;
    -o-transform:translate3d(0px,0,0);
    -o-transition-timing-function:ease;
    -o-transform:translate(0px,0px);

    -ms-transition-property:-ms-transform, left, top;
    -ms-transition-duration:0s;
    -ms-transform:translate3d(0px,0,0);
    -ms-transition-timing-function:ease;

    transition-property:transform, left, top;
    transition-duration:0s;
    transform:translate3d(0px,0,0);
    transition-timing-function:ease;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
}
.swiper-slide {
    float: left;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
}

/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
    /* Specify Swiper's Size: */

    /*width:200px;
    height: 100px;*/
}
.swiper-slide {
    /* Specify Slides's Size: */

    /*width: 100%;
    height: 100%;*/
}
.swiper-slide-active {
    /* Specific active slide styling: */

}
.swiper-slide-visible {
    /* Specific visible slide styling: */   

}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
    /* Stylize pagination button: */    

}
.swiper-active-switch {
    /* Specific active button style: */ 

}
.swiper-visible-switch {
    /* Specific visible button style: */    

}


/* Demo Styles */
html {
  height: 100%;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
}
.red-slide {
  background: #ca4040;
}
.blue-slide {
  background: #4390ee;
}
.orange-slide {
  background: #ff8604;
}
.green-slide {
  background: #49a430;
}
.pink-slide {
  background: #973e76;
}
.swiper-slide .title {
  font-style: italic;
  font-size: 42px;
  margin-top: 80px;
  margin-bottom: 0;
  line-height: 45px;
}
.pagination {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 10px;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #222;
  margin-right: 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;
}
.swiper-visible-switch {
  background: #aaa;
}
.swiper-active-switch {
  background: #fff;
}

.image {
    width:180px;
    height:180px;
}

.selected {
    border-style: solid;
    border-color: black;
    border-width: 2.5px;
}

JS： 

var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true
  })


      $(".image").click(function() {
        if($(this).hasClass("selected"))
             $(this).removeClass("selected");
        else
             $(this).addClass("selected");
     });

2 個解決方案

解決方案1
 1 已采納  2014-03-19 14:37:11

兩個問題。 首先，您在使用2.5px邊框時遇到了舍入錯誤。 嘗試將其更改為2或3px。 其次，邊框有效地在圖像周圍添加了2-3px的空白，這導致它們跳轉。 嘗試在添加邊框時消失的圖像周圍留有空白。 像這樣： 

.image {
    width:180px;
    height:180px;
    margin: 3px;
}

.selected {
    border-style: solid;
    border-color: black;
    border-width: 3px;
    margin: 0;
}

http://jsfiddle.net/pDNJ7/1/

至於點擊圖片時不刷卡。 按照noSwiping: true API，在初始化您的Swiper時添加noSwiping: true ，並將類swiper-no-swiping到您不想swiper-no-swiping的任何元素上。 我已將其添加到以下jsfiddle第一頁的3個<img>標記中：

http://jsfiddle.net/pDNJ7/2/

要在滑動時不突出顯示/不突出顯示，請嘗試以下代碼： 

mySwiper.addCallback('SlideChangeStart', function(swiper){
  sliding = true;
}) ;
 mySwiper.addCallback('SlideChangeEnd', function(swiper){
  sliding = false;
}) ;

      $(".image").click(function() {          
          if(!sliding){
        if($(this).hasClass("selected"))
             $(this).removeClass("selected");
        else
             $(this).addClass("selected");
          }
     });

http://jsfiddle.net/pDNJ7/3/

解決方案2
 1  2014-03-19 15:01:35

您可以檢查是否自從按下鼠標按鈕直到松開鼠標為止，是否將鼠標移動了一定距離，因為松開鼠標按鈕后會觸發click事件。 當行進距離過高時，則禁止選擇。 您可以將鼠標的起始位置存儲在一個變量中，並在單擊事件中對其進行檢查。 

$(".image").click(function() {
   if(distancetravelled>treshhold)
   {
       if($(this).hasClass("selected"))
            $(this).removeClass("selected");
       else
            $(this).addClass("selected");
   }
 });
$(".image").onmousedown(function()
{
   startposition = currentMousePos
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Jquery如何在href中添加onclick 如何在jQuery中添加狀態onClick？ 如何在輸入區域中添加onclick jquery函數 如何在jQuery中的noty中添加事件onClick？ jQuery-添加例外onclick 如何使用jquery為文檔中的所有iframe添加onclick事件？ jQuery onClick：如何向元素添加類並從所有其他元素中刪除 如何通過onclick選中的jQuery添加日期時間值以輸入 如何在 jquery 中的每個 onclick function 之后添加圖像並增加圖像 從jquery ajax feed中刪除斜杠，如何添加onClick attr
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM