添加JavaScript / jQuery后,我在主体部分中的锚不起作用。知道如何解决这个问题吗?
如果我禁用JavaScript代码,则该链接将起作用。因此,这一定是JavaScript问题。而且,我没有任何错误。
JS代码:
$(".project").hover3d({
selector: ".project__card",
shine: true,
});
(function($){
$.fn.hover3d = function(options){
var settings = $.extend({
selector : null,
perspective : 1000,
sensitivity : 20,
invert : false,
shine : false,
hoverInClass : "hover-in",
hoverOutClass : "hover-out",
hoverClass : "hover-3d"
}, options);
return this.each(function(){
var $this = $(this),
$card = $this.find(settings.selector);
currentX = 0;
currentY = 0;
if( settings.shine ){
$card.append('<div class="shine"></div>');
}
var $shine = $(this).find(".shine");
// Set perspective and transformStyle value
// for element and 3d object
$this.css({
perspective: settings.perspective+"px",
transformStyle: "preserve-3d"
});
$card.css({
perspective: settings.perspective+"px",
transformStyle: "preserve-3d",
});
$shine.css({
position : "absolute",
top : 0,
left : 0,
bottom : 0,
right : 0,
transform : 'translateZ(1px)',
"z-index" : 9
});
// Mouse Enter function, this will add hover-in
// Class so when mouse over it will add transition
// based on hover-in class
function enter(event){
$card.addClass(settings.hoverInClass+" "+settings.hoverClass);
currentX = currentY = 0;
setTimeout(function(){
$card.removeClass(settings.hoverInClass);
}, 1000);
}
// Mouse movement Parallax effect
function move(event){
var w = $card.innerWidth(),
h = $card.innerHeight(),
currentX = Math.round(event.pageX - $card.offset().left),
currentY = Math.round(event.pageY - $card.offset().top),
ax = settings.invert ? ( w / 2 - currentX)/settings.sensitivity : -( w / 2 - currentX)/settings.sensitivity,
ay = settings.invert ? -( h / 2 - currentY)/settings.sensitivity : ( h / 2 - currentY)/settings.sensitivity,
dx = currentX - w / 2,
dy = currentY - h / 2,
theta = Math.atan2(dy, dx),
angle = theta * 180 / Math.PI - 90;
if (angle < 0) {
angle = angle + 360;
}
$card.css({
perspective : settings.perspective+"px",
transformStyle : "preserve-3d",
transform : "rotateY("+ax+"deg) rotateX("+ay+"deg)"
});
$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsetY / h * .5 + ') 0%,rgba(255,255,255,0) 80%)');
}
// Mouse leave function, will set the transform
// property to 0, and add transition class
// for exit animation
function leave(){
$card.addClass(settings.hoverOutClass+" "+settings.hoverClass);
$card.css({
perspective : settings.perspective+"px",
transformStyle : "preserve-3d",
transform : "rotateX(0) rotateY(0)"
});
setTimeout( function(){
$card.removeClass(settings.hoverOutClass+" "+settings.hoverClass);
currentX = currentY = 0;
}, 1000 );
}
// Mouseenter event binding
$this.on( "mouseenter", function(){
return enter();
});
// Mousemove event binding
$this.on( "mousemove", function(event){
return move(event);
});
// Mouseleave event binding
$this.on( "mouseleave", function(){
return leave();
});
});
};
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project__card">
<a href="https://www.youtube.com/" target="_blank"
class="project__image"><img src="img/1.jpg"></a>
<div class="project__detail">
<h2 class="project__title"><a href="https://www.youtube.com/" target="_blank">YOTUBE</a></h2>
<small class="project__category"><a href="https://www.youtube.com/" target="_blank">FOUNDER</a></small>
</div>