[英]mousemove on multiple div with same class name
我想在具有相同类名的多个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');
});
});
这是因为backgroud-position对于每个.reference应该是相对的。 第一个工作正常，因为它最大-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数学是错误的。 当你在e.pageY上降低时，你的偏差为1.15会越来越大，你的结果会变得越来越大。
没有它的工作正常工作：
$(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使用其他数学。
用另一个元素包装.reference元素。 并将其定位为relative位置。 也可以使用e.offsetX和e.offsetY代替e.pageX和e.pageY 。然后您将遇到的问题将得到解决。
工作实例
$(document).ready(function() { $('.reference').mousemove(function(e) { var x = -(e.offsetX + this.offsetLeft) / 1.15; var y = -(e.offsetY + this.offsetTop) / 1.15; $(this).css('background-position', x + 'px ' + y + 'px'); $(this).css('transition', 'background-position 1.5s ease-out'); }); });
.sliderBlock { position: relative; overflow: hidden; } #landing-content { overflow: hidden; width: 100%; margin: 10px 0 0 0; background-size: 190% 190%; background-repeat: no-repeat; max-height: 500px; } #landing-content3 { overflow: hidden; background-image: url(http://virtualtourpro.com.au/wp-content/uploads/2012/03/Kitchen-Dining-360.jpg); width: 100%; margin: 10px 0 0 0; background-size: 190% 190%; background-repeat: no-repeat; max-height: 500px; } #landing-content4 { overflow: hidden; background-image: url(https://www.starkwoodmediagroup.com/assets/img/panorama/360-image.jpg); width: 100%; margin: 10px 0 0 0; background-size: 190% 190%; background-repeat: no-repeat; max-height: 500px; } #landing-content5 { overflow: hidden; background-image: url(http://www.radschlag.at/wp-content/uploads/2016/01/Panorama-2.jpg); width: 100%; margin: 10px 0 0 0; background-size: 190% 190%; background-repeat: no-repeat; max-height: 500px; } #landing-content6 { overflow: hidden; background-image: url(http://www.easypano.com/gallery/panoweaver/201112021732/panoramamic.jpg); width: 100%; margin: 10px 0 0 0; background-size: 190% 190%; background-repeat: no-repeat; max-height: 500px; } .slider { margin-left: auto; margin-right: auto; overflow: hidden; padding-top: 100%; max-width: 1002px; }
<title>Parallax</title> <body> <div class="sliderBlock"> <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> <div class="sliderBlock"> <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> <div class="sliderBlock"> <div class="reference" id="landing-content3"> <section class="slider"></section> </div> </div> <div class="sliderBlock"> <div class="reference" id="landing-content4"> <section class="slider"></section> </div> </div> <div class="sliderBlock"> <div class="reference" id="landing-content5"> <section class="slider"></section> </div> </div> <div class="sliderBlock"> <div class="reference" id="landing-content6"> <section class="slider"></section> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </body>
如何在cheerio的div中解析具有相同类名的多个div？
[英]How to parse multiple div with same class name in a div in cheerio?
当我有多个具有相同类名的div时如何显示/隐藏某些div
[英]How to show/hide certain div when i have multiple div with same class name
如果有多个具有相同类名的父div，则子div类没有内容时，隐藏父div类
[英]Hide parent div class if child div class does not have content when there are multiple parent divs with the same class name
如何从 javascript 中相同的多个 div 类名中获取特定值？
[英]How do I get the particular value from same multiple div class name in javascript?
最好的方法是只显示来自具有相同类名的多个div标签的唯一值
[英]Best way to display only distinct value from multiple div tags with same class name
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.