根据鼠标位置自动滚动div中的图标

时间:2014-05-01 14:50:51

标签: javascript jquery html css

我得到了这个工作,但它正在移动页面上的每张图片而不仅仅是我想要的图片。

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var parent = $('#parent');
var img = $('img:first-child');

parent.on('mousemove', function(e) {
    mouseX = e.pageX
    console.log(mouseX/parent.width()*100);
    img.css('margin-left',-mouseX/parent.width()*100);

});
});//]]>  

</script>

图标代码为:

<div id="parent">

      <div id="propertyThumbnails">

  <a href="#"><img src= "icons/Facebook.png" width="24" height="24"></a>
  <a href="#"><img src= "icons/Twitter.png" width="24" height="24"></a>
  <a href="#"><img src= "icons/Google.png" width="24" height="24"></a>
  <a href="#"><img src= "icons/Digg.png" width="24" height="24"></a>
  <a href="#"><img src= "icons/LinkedIn.png" width="24" height="24"></a>
  <a href="#"><img src= "icons/Tumblr.png" width="24" height="24"></a>
    <a href="#"><img src= "icons/Pinterest.png" width="24" height="24"></a>
    <a href="#"><img src= "icons/YouTube.png" width="24" height="24"></a>
    <a href="#"><img src= "icons/OtherSite.png" width="24" height="24"></a>
</div></div>

任何想法如何只滚动我想要的那些而不是页面上的每个图像?

2 个答案:

答案 0 :(得分:0)

使用

var parent = $('#parent');
var img = parent.find('a > img:first-child');

答案 1 :(得分:0)

您的jquery将选择所有图片,因为所有<img>标记都是<a>的第一个孩子。您需要使用更具体的选择,例如:

$('a:first-child > img')