<script src="jquery.min.js"></script>
<script type="text/javascript" src="blowup.min.js"></script>
<img id="chgImg" class="demo-img" src="https://www.spark-bearing.com/uploads/photo/s100/20170928/59ccb8d4d3fe9.JPG" width="760" style="cursor:pointer" />
<div class="zoom-small-image">
<img id="chgImg" src="https://www.spark-bearing.com/uploads/photo/s100/20170928/59ccb8d4d3fe9.JPG" width="760" style="cursor:pointer" />
</div>
<script type="text/javascript">
$(function(){
var box = document.getElementsByClassName("zoom-small-image");
if(box.length > 0){
for (i = 0; i < box.length; i++) {
var imgs = box[i].getElementsByTagName("img")
for (k = 0; k < imgs.length; k++) {
console.log(imgs[k]);
$(imgs[k]).blowup({
background : "#FCEBB6"
});
}
}
}
$(".demo-img").blowup({
background : "#FCEBB6"
});
})
</script>
<script>
function bigimg(obj){
var zoom = parseInt(obj.style.zoom,10)||100;
console.log(zoom);
zoom += event.wheelDelta / 12;
if(zoom > 0 )
obj.style.zoom=zoom+'%';
return false;
}
</script>
// blowup.min.js
// Paul Krishnamurthy 2016
$(function (o) {
o.fn.blowup = function (e) {
var t = this;
if (!t.is("img")) return void console.log("%c Blowup.js Error: %cTarget element is not an image.", "background: #FCEBB6; color: #F07818; font-size: 17px; font-weight: bold;", "background: #FCEBB6; color: #F07818; font-size: 17px;");
var n = t.attr("src"),
i = (t.width(), t.height(), new Image);
i.src = t.attr("src");
var r = {
round: !0,
width: 200,
height: 200,
background: "#FFF",
shadow: "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
border: "6px solid #FFF",
cursor: !0,
zIndex: 999999
},
s = o.extend(r, e);
t.on("dragstart", function (o) {
o.preventDefault()
}), t.css("cursor", s.cursor ? "crosshair" : "none");
var d = document.createElement("div");
d.id = "BlowupLens", o("body").append(d), $blowupLens = o("#BlowupLens"), $blowupLens.css({
position: "absolute",
visibility: "hidden",
"pointer-events": "none",
zIndex: s.zIndex,
width: s.width *2.5,
height: s.height *2.5,
border: s.border,
background: s.background,
"border-radius": s.round ? "50%" : "none",
"box-shadow": s.shadow,
"background-repeat": "no-repeat"
}), t.mouseenter(function () {
$blowupLens.css("visibility", "visible")
}), t.mousemove(function (o) {
console.log("pppp" + s.width);
console.log("kkk" + o.pageX);
var e = o.pageX - s.width / 2,
r = o.pageY - s.height / 2,
d = o.pageX - this.offsetLeft,
a = o.pageY - this.offsetTop,
u = -Math.floor(d / t.width() * i.width - s.width / 2) + t.width() + s.width * 4.1;
h = -Math.floor(a / t.height() * i.height - s.height / 2) + o.pageY + s.height *1.1;
console.log(u );
$blowupLens.css({
left: e,
top: r,
"background-image": "url(" + n + ")",
// "background-position": u + " " + h,
"background-position" : u+"px" + " " + h+"px"
})
}), t.mouseleave(function () {
$blowupLens.css("visibility", "hidden")
})
}
});
blowup.min.js 如上代码段