如何添加阈值onclick() jQuery

How to add threshhold onclick() jQuery?

本文关键字：阈值 onclick jQuery 添加 何添加      更新时间：2023-09-26

如何在滑动条中的图像上添加点击阈值?问题是，如果我通过点击和拖动图片将滑块移动到另一个页面，这个会被选中。

我如何添加阈值或其他东西，以便当我从一张幻灯片移动到另一张时它不会被选中?

第二个问题可能是:如何在不移动的情况下选择图像(因为如果我选择其中一个，其他两个都在移动)，我希望它们位于滑动器的中心(它们与底部，顶部，左侧和右侧之间的距离相同)

我想要这个效果的phonegap移动应用程序，我使用jQuery和jQuery移动。我还使用了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.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/

关于点击图像时不滑动。根据Swiper API在初始化您的Swiper时添加noSwiping: true，并将类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/

你可以检查，鼠标是否移动了一定距离，因为你按下鼠标按钮直到你释放它，因为点击事件在你释放鼠标按钮后被触发。当行进距离过大时，抑制选择。您可以将鼠标的起始位置存储在一个变量中，并在单击事件中检查它。

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