传入参数图片源地址及放大倍数
//创建节点 $.fn.scale = function(json) {//json.src json.scale $(this).html(""); var width = $(this).width(); var height = $(this).height(); //创建图片 var img = $("<img>"); $(this).append(img); img.css({ "width": width, "height": height }).attr("src", json.src) //创建图片滤镜 var div = $("<div>"); $(this).append(div); div.addClass("imgZoom").css({ "width": width / json.scale, "height": height / json.scale, "backgroundColor": "rgba(0,0,0,0.2)", "position": "absolute" }).hide(); //创建大图显示区域; //创建图片滤镜 var div = $("<div>"); $(this).append(div); div.addClass("imgBigWrap").css({ "width": width, "height": height, "position": "absolute", "overflow": "hidden", "top": 0, "left": width }).hide(); //创建大图 var img = $("<img>"); div.append(img); img.addClass("imgBig").css({ "width": width * json.scale, "height": height * json.scale, "position": "absolute", }).attr("src", json.src) $(this).mousemove(function(e) { //绑定事件 //创建移动事件 var evt = window.event || e; $(".imgZoom").show(); $(".imgBigWrap").show(); var x = evt.clientX - $(this).offset().left - $(".imgZoom").width() / 2; var y = evt.clientY - $(this).offset().top - $(".imgZoom").height() / 2; $(".imgZoom").css({ "left": Math.max(Math.min(x, width - $(".imgZoom").width()), 0), "top": Math.max(Math.min(y, height - $(".imgZoom").height()), 0) }); $(".imgBig").css({ "left": -$(".imgZoom").position().left * json.scale, "top": -$(".imgZoom").position().top * json.scale }) }) $(this).mouseout(function() { $(".imgZoom").hide(); $(".imgBigWrap").hide(); }) }
时间: 2024-11-03 01:34:59