Question

我正在使用JQuery轮播插件（simplyscroll）并尝试在点击时检测每个图片的位置。然而，由于处理图像定位以获得旋转木马效果的方式，我得到负左侧位置，我似乎无法找出任何公式来获得真正的左侧位置。

我能做些什么工作吗？我基本上需要说的是，如果图像至少在容器的一半（overflow:hidden）上，则容器（在右边），然后允许点击。

希望有人可以提供帮助吗？

修改

我没有提到的一件事是我在旋转木马图像上有一张图像地图。这是因为图像最终会是人物照片，我只希望它们可以点击，而不是图像的环绕/背景。

以下是我到目前为止的代码。如果你得到指针光标，那么这是在图像映射上。如果单击已经存在一次的图像，则左侧位置将变为负数。但是，如果单击图像映射外部的图像（尝试左下角），您将看到左侧位置正确！

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://logicbox.net/jquery/simplyscroll/jquery.simplyscroll-1.0.4.min.js"></script>

<style type="text/css" media="screen"> 
html, body{
   margin:0;
   padding:0;
}

#quirksFix{
   text-align: center;
}

#container{
   width: 1024px; 
   height: 768px;
   margin: 0 auto -60px;
   padding:0;
   overflow:hidden;
   border:1px solid #000;
   position:relative;
}    

.simply-scroll { /* Customisable base class for style override DIV */
    width: 100%;
    height: 600px;
    margin-bottom: 0;
}

.simply-scroll .simply-scroll-clip{
    width: 100%;
    height: 600px;
}

.custom { /* Applied to container DIV */
    width: 100%;
    height: 600px;
}

.custom .simply-scroll-clip { /* Applied to clip DIV */
    width: 100%;
    height: 600px;
}

/* Existing styles */
#scroller .section {
    float:left;
    width: 268px;
    height: 530px;
}

#scroller .feature-headline {
    height:530px;
    margin:0;
}

#scroller .feature-headline img {
    border:0;
}

/* Container DIV - automatically generated */
.simply-scroll-container { 
    position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#debug{
   position:absolute;
   top:200px;
   left:0;
   width:200px;
   background-color:#fff;
}
</style>


<script type="text/javascript">
$(document).ready(function() {

 var test = new $.simplyScroll($("#scroller")[0],{
      className: 'custom',
      autoMode: 'loop',
      pauseOnHover: false
   });

   $(".imagemap").click(function(e) {
      var headline = $(this).parent();
      var headlineImg = headline.children('img');
      var theImg = $(headlineImg).attr('class');
      $('#debug').html('ImageMap Left Position: '+$('.'+theImg).position().left);
   });

   $(".test1, .test2, .test3, .test4, .test5").click(function(e) {
      $('#debug').html('Image Left Position: '+$(this).position().left);
   });

});
</script>
</head>

<body>

<div id="quirksFix">
   <div id="container">
      <div id="scroller">
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_9N3H5GYL_tb.jpg" usemap="#map1" class="test1" width="268" /><map name="map1" class="imagemap"><area shape="poly" coords="108,524,157,343,263,176,264,131,196,4,74,4,45,60,57,118,57,115,92,225,48,342,3,351,19,471" href="#" /></map>
               </div>
            </div>
         </div>
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080513_4D3SD1BQ_tb.jpg" usemap="#map2" class="test2" width="268" /><map name="map2" class="imagemap"><area shape="poly" coords="263,27,91,515,3,513,3,362,25,3,262,4" href="#" /></map>
               </div>
            </div>
         </div>
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080513_VPJWVQRW_tb.jpg" usemap="#map3" class="test3" width="268" /><map name="map3" class="imagemap"><area shape="poly" coords="148,11,226,55,257,141,228,233,202,289,221,489,161,522,130,375,75,320,66,51,102,20" href="#" /></map>
               </div>
            </div>
         </div>
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080514_B1YJ08B6_tb.jpg" usemap="#map4" class="test4" width="268" /><map name="map4" class="imagemap"><area shape="poly" coords="189,468,118,446,114,285,124,218,84,126,17,104,3,50,0,3,215,4,212,78,151,140,162,164,186,155,207,168,209,209,265,297,260,350,199,308,203,454" href="#" /></map>
               </div>
            </div>
         </div>
         <div class="section">
            <div class="hp-highlight">
               <div class="feature-headline">
                  <img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_38CG51J2_tb.jpg" usemap="#map5" class="test5" width="268" /><map name="map5" class="imagemap"><area shape="poly" coords="189,468,118,446,114,285,124,218,84,126,17,104,3,50,0,3,215,4,212,78,151,140,162,164,186,155,207,168,209,209,265,297,260,350,199,308,203,454" href="#" /></map>
               </div>
            </div>
         </div>
      </div>

      <div id="debug">Click on an image</div>

   </div>
</div>

</body>
</html>

这里奇怪的是，当我点击图像地图时，我选择父母然后选择图像，所以我不明白为什么这不会给我与点击图像本身相同的价值。< / p>

希望我已经清楚地解释了这一点。如果您需要更多信息，请告诉我。

JQuery轮播 - 获取元素的位置

0 个答案: