Fatal编程技术网
  • javascript/
  • Javascript 在具有相同类名的多个div上移动鼠标

Javascript 在具有相同类名的多个div上移动鼠标

javascript jquery

Javascript 在具有相同类名的多个div上移动鼠标,javascript,jquery,Javascript,Jquery,我想在多个具有相同类名的div上进行鼠标移动，但鼠标位置不会在每个div内重新启动 这是你的电话号码 这是我的密码： <body> <div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-

我想在多个具有相同类名的div上进行鼠标移动，但鼠标位置不会在每个div内重新启动

这是你的电话号码

这是我的密码：

<body>
<div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_02.jpg);"><section class="slider"></section></div>
<div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_01.jpg);"><section class="slider"></section></div>
<div class="reference" id="landing-content3"><section class="slider"></section></div>
<div class="reference" id="landing-content4"><section class="slider"></section></div>
<div class="reference" id="landing-content5"><section class="slider"></section></div>
<div class="reference" id="landing-content6"><section class="slider"></section></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</body>


$(document).ready(function(){
 $('.reference').mousemove(function(e){
  var x = -(e.pageX + this.offsetLeft) / 1.15;
  var y = -(e.pageY + this.offsetTop) / 1.15;
  $(this).css('background-position', x + 'px ' + y + 'px');
  $(this).css('transition', 'background-position 1.5s ease-out');
 });
});


$（文档）.ready（函数（）{
$（'.reference'）.mousemove（函数（e）{
var x=-（e.pageX+this.offsetLeft）/1.15；
变量y=-（e.pageY+this.offsetTop）/1.15；
$（this.css（'background-position'，x+'px'+y+'px'）；
$（this.css（'transition'，'backgroundposition1.5s ease out'）；
});
});
这是因为
背景位置
应该是每个
的相对位置。参考
。第一个可以正常工作，因为它的最大值
-500px
。所以第二个会有
-1000px
等等。您可以这样做：

 var x = -(Math.abs(e.pageX - this.offsetLeft)) / 1.15;
 var y = -(Math.abs(e.pageY - this.offsetTop)) / 1.15;
完整代码：

$(document).ready(function(){
  $('.reference').mousemove(function(e){

    var x = -(Math.abs(e.pageX - this.offsetLeft)) / 1.15;
    var y = -(Math.abs(e.pageY - this.offsetTop)) / 1.15;
    $(this).css('background-position', x + 'px ' + y + 'px');
    $(this).css('transition', 'background-position 1.5s ease-out');

  });
});
这是因为
背景位置
应该是每个
参考的相对位置。第一个可以正常工作，因为它的最大值
-500px
。所以第二个会有
-1000px
等等。您可以这样做：


 var x = -(Math.abs(e.pageX - this.offsetLeft)) / 1.15;
 var y = -(Math.abs(e.pageY - this.offsetTop)) / 1.15;


完整代码：


$(document).ready(function(){
  $('.reference').mousemove(function(e){

    var x = -(Math.abs(e.pageX - this.offsetLeft)) / 1.15;
    var y = -(Math.abs(e.pageY - this.offsetTop)) / 1.15;
    $(this).css('background-position', x + 'px ' + y + 'px');
    $(this).css('transition', 'background-position 1.5s ease-out');

  });
});



您对
var x
和
var y
的计算是错误的。你的差距
1.15
随着你在e.pageY上的排名越来越低，你的成绩也会越来越大

在没有偏差的情况下，它工作得很好：


$(document).ready(function(){
  $('.reference').each(function(){
  $(this).mousemove(function(e){
  var x = -e.pageX + this.offsetLeft;
  var y = -e.pageY + this.offsetTop;
    console.log(e.pageX);
     console.log(e.pageY);
    $(this).css('background-position', x + 'px ' + y + 'px');
    $(this).css('transition', 'background-position 1.5s ease-out');
  });
  });
});



因此，结论：对x和y使用其他数学。
你对
var x
和
var y
的数学是错误的。你的差距
1.15
随着你在e.pageY上的排名越来越低，你的成绩也会越来越大

在没有偏差的情况下，它工作得很好：


$(document).ready(function(){
  $('.reference').each(function(){
  $(this).mousemove(function(e){
  var x = -e.pageX + this.offsetLeft;
  var y = -e.pageY + this.offsetTop;
    console.log(e.pageX);
     console.log(e.pageY);
    $(this).css('background-position', x + 'px ' + y + 'px');
    $(this).css('transition', 'background-position 1.5s ease-out');
  });
  });
});



因此，结论：对x和y使用其他数学。
将
元素包装起来。用另一个元素引用
元素。并将其位置设置为
relative
。也可以使用
e.offsetX
和
e.offsetY
代替
e.pageX
和
e.pageY
。这样您遇到的问题就会得到解决

工作示例



$（文档）.ready（函数（）{
$（'.reference'）.mousemove（函数（e）{
var x=-（e.offsetX+this.offsetLeft）/1.15；
变量y=-（e.offsetY+this.offsetTop）/1.15；
$（this.css（'background-position'，x+'px'+y+'px'）；
$（this.css（'transition'，'backgroundposition1.5s ease out'）；
});
});

.sliderBlock{
位置：相对位置；
溢出：隐藏；
}
#登陆内容{
溢出：隐藏；
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
#登陆-3{
溢出：隐藏；
背景图片：url(http://virtualtourpro.com.au/wp-content/uploads/2012/03/Kitchen-Dining-360.jpg);
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
#登陆-4{
溢出：隐藏；
背景图片：url(https://www.starkwoodmediagroup.com/assets/img/panorama/360-image.jpg);
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
#着陆-5{
溢出：隐藏；
背景图片：url(http://www.radschlag.at/wp-content/uploads/2016/01/Panorama-2.jpg);
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
#登陆-6{
溢出：隐藏；
背景图片：url(http://www.easypano.com/gallery/panoweaver/201112021732/panoramamic.jpg);
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
.滑块{
左边距：自动；
右边距：自动；
溢出：隐藏；
填充顶部：100%；
最大宽度：1002px；
}

视差

用另一个元素包装
。引用
元素。并将其位置设置为
relative
。也可以使用
e.offsetX
和
e.offsetY
代替
e.pageX
和
e.pageY
。这样您遇到的问题就会得到解决

工作示例



$（文档）.ready（函数（）{
$（'.reference'）.mousemove（函数（e）{
var x=-（e.offsetX+this.offsetLeft）/1.15；
变量y=-（e.offsetY+this.offsetTop）/1.15；
$（this.css（'background-position'，x+'px'+y+'px'）；
$（this.css（'transition'，'backgroundposition1.5s ease out'）；
});
});

.sliderBlock{
位置：相对位置；
溢出：隐藏；
}
#登陆内容{
溢出：隐藏；
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
#登陆-3{
溢出：隐藏；
背景图片：url(http://virtualtourpro.com.au/wp-content/uploads/2012/03/Kitchen-Dining-360.jpg);
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
#登陆-4{
溢出：隐藏；
背景图片：url(https://www.starkwoodmediagroup.com/assets/img/panorama/360-image.jpg);
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
#着陆-5{
溢出：隐藏；
背景图片：url(http://www.radschlag.at/wp-content/uploads/2016/01/Panorama-2.jpg);
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
#登陆-6{
溢出：隐藏；
背景图片：url(http://www.easypano.com/gallery/panoweaver/201112021732/panoramamic.jpg);
宽度：100%；
利润率：10px0；
背景大小：190%190%；
背景重复：无重复；
最大高度：500px；
}
.滑块{
左边距：自动；
右边距：自动；
溢出：隐藏；
填充顶部：100%；
最大宽度：1002px；
}

视差