$(function(){
var $wrap = $(".layer-wrap"), // 外层包围
$img = $img = $("img",$wrap), // 图层
imgX, imgY;
$wrap.addClass("layer-img-done"); // 载入完成视觉
// 显示隐藏图层
$(".J_selImg").change(function(){
var $t = $(this),
$simg = $img.filter("[data-id=" + $t.val() + "]");
$simg.css({display:( this.checked ? "block" : "none" )});
});
// 设置外层包围宽高
$wrap.css({width:$img.css("width"),height:$img.css("height")});
// 获取外层包围宽高,计算缩放比率和移动范围时用
var wrapw = $wrap.width(),
wraph = $wrap.height();
// 缩放事件
$wrap[0].onmousewheel = function(e){
var type = e.type,
w = $img.width(), // 此时图片宽度
h = $img.height(), // 此时图片高度
power = 600, // 每次缩放时宽度加减的数值
x = e.clientX - $wrap.offset().left,
图片缩放(可多图层叠加、隐藏显示、拖动)
最新推荐文章于 2024-04-18 10:16:04 发布
本文介绍了一个使用JavaScript实现的图片缩放和拖动功能,包括多图层叠加、隐藏显示以及鼠标滚轮缩放。通过监听鼠标滚轮事件调整图片大小,鼠标按下并移动来拖动图片,并在图片超出容器边界时提供视觉反馈。
摘要由CSDN通过智能技术生成