我正在尝试使用它来跟随我的光标并放大我正在盘旋的一个小区域。 http://jsfiddle.net/wwwrha04/
这是JS
(function($) {
$(document).ready(function() {
var scale = 2;
var $magnifyingGlass = $('<div class="magnifying_glass"></div>');
var $magnifiedContent = $('<div class="magnified_content"></div>');
var $magnifyingLens = $('<div class="magnifying_lens"></div>');
//setup
$magnifiedContent.css({
backgroundColor: $("html").css("background-color") || $("body").css("background-color"),
backgroundImage: $("html").css("background-image") || $("body").css("background-image"),
backgroundAttachment: $("html").css("background-attachment") || $("body").css("background-attachment"),
backgroundPosition: $("html").css("background-position") || $("body").css("background-position")
});
$magnifiedContent.html($(document.body).html());
$magnifyingGlass.append($magnifiedContent);
$magnifyingGlass.append($magnifyingLens); //comment this line to allow interaction
$(document.body).append($magnifyingGlass);
//funcs
function updateViewSize() {
$magnifiedContent.css({width: $(document).width(), height: $(document).height()});
}
//begin
updateViewSize();
//events
$(window).resize(updateViewSize);
$magnifyingGlass.mouseover(function(e) {
e.preventDefault();
$(this).data("drag", {mouse: {top: e.pageY, left: e.pageX}, offset: {top: $(this).offset().top, left: $(this).offset().left}});
});
$(document.body).mousemove(function(e) {
if ($magnifyingGlass.data("drag")) {
var drag =$magnifyingGlass.data("drag");
var left = drag.offset.left + (e.pageX-drag.mouse.left);
var top = drag.offset.top + (e.pageY-drag.mouse.top);
$magnifyingGlass.css({left: left, top: top});
$magnifiedContent.css({left: -left*scale, top: -top*scale});
}
}).mouseup(function() {
$magnifyingGlass.removeData("drag");
});
});
})(jQuery);
我可以做些什么来确保我的光标粘在放大的Div的中心?当光标进入浏览器时,如何让它跳转到光标?
或者有没有人有更好的方法来创建这个功能?我只能找到图像放大镜,我需要能够放大任何元素。