我有一个网站,我有implimented图像放大镜,我用下面的javascript这样做:
<img class="magnifiedImg" src="" />
.magnify{
border-radius: 50%;
border: 2px solid black;
position: absolute;
z-index: 20;
background-repeat: no-repeat;
background-color: white;
box-shadow: inset 0 0 20px rgba(0,0,0,.5);
display: none;
cursor: none;
}
/*Size is set in pixels... supports being written as: '250px' */
var magnifierSize = 250;
/*How many times magnification of image on page.*/
var magnification = 4;
function magnifier() {
this.magnifyImg = function(ptr, magnification, magnifierSize) {
var $pointer;
if (typeof ptr == "string") {
$pointer = $(ptr);
} else if (typeof ptr == "object") {
$pointer = ptr;
}
if(!($pointer.is('img'))){
alert('Object must be image.');
return false;
}
magnification = +(magnification);
$pointer.hover(function() {
$(this).css('cursor', 'none');
$('.magnify').show();
//Setting some variables for later use
var width = $(this).width();
var height = $(this).height();
var src = $(this).attr('src');
var imagePos = $(this).offset();
var image = $(this);
if (magnifierSize == undefined) {
magnifierSize = '150px';
}
$('.magnify').css({
'background-size': width * magnification + 'px ' + height * magnification + "px",
'background-image': 'url("' + src + '")',
'width': magnifierSize,
'height': magnifierSize
});
//Setting a few more...
var magnifyOffset = +($('.magnify').width() / 2);
var rightSide = +(imagePos.left + $(this).width());
var bottomSide = +(imagePos.top + $(this).height());
$(document).mousemove(function(e) {
if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide + magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e.pageY > +(bottomSide + magnifyOffset / 6)) {
$('.magnify').hide();
$(document).unbind('mousemove');
}
var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification - magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification - magnifyOffset) + "px";
$('.magnify').css({
'left': e.pageX - magnifyOffset,
'top': e.pageY - magnifyOffset,
'background-position': backgroundPos
});
});
}, function() {
});
};
this.init = function() {
$('body').prepend('<div class="magnify"></div>');
}
return this.init();
}
var magnify = new magnifier();
magnify.magnifyImg('img', magnification, magnifierSize);
问题是放大镜是未来的所有图像在我的网站,而不是它应该只来的地方提到的类,这里是我的现场网址text可以任何人请告诉我什么是错的,在这里,提前感谢
1条答案
按热度按时间oaxa6hgo1#
将指针
img
更改为.magnifiedImg
,并仅将magnifiedImg
类添加到您想要放大的图像