gpt4 book ai didi

javascript - 响应式问题 JQzoom

转载 作者:行者123 更新时间:2023-11-28 16:27:21 25 4
gpt4 key购买 nike

IM 使用 JQzoom 进行元素,我制作的不是桌面版本,但我需要让产品图像响应。宽度和高度在脚本的选项中定义。

;(function($){
$.fn.zoom = function(options){
var _option = {
align: "left",
thumb_image_width: 600,
thumb_image_height: 600,
source_image_width: 1200,
source_image_height: 1200,
zoom_area_width: 600,
zoom_area_height: "justify",
zoom_area_distance: 10,
zoom_easing: true,
click_to_zoom: false,
zoom_element: "auto",
small_thumbs: 12,
smallthumb_inactive_opacity: 0.4,
smallthumb_hide_single: true,
smallthumb_select_on_hover: false,
smallthumbs_position: "bottom",
show_icon: true,
hide_cursor: false,
speed: 600,
autoplay: true,
autoplay_interval: 6000,
keyboard: true,
right_to_left: false,
}

现在我的问题是,我能否使用 % 或 vw/vh 来实现此功能,因为如果我填写例如 32vh,脚本将无法运行。也许有一种方法可以让他们选择接受它,还是我必须更改其余代码?

full script

最佳答案

正如 LGSon 在他的回复中所说,有许多对固定像素测量的硬编码引用被添加到您的 DOM 中的节点。这使得猴子无法修补脚本,因此需要修改以满足您的要求

这是一个修改后的脚本,与您已经使用的脚本相同,只是您在自初始化函数的末尾传递了测量类型。

这是您的插件更改的缩略版:

(function ($, measurement) {
//GLOBAL VARIABLES

...

//centering lens
this.node.css({
top: 0,
left: 0,
width: this.node.w + measurement,
height: this.node.h + measurement,
position: 'absolute',
display: 'none',
borderWidth: 1 + measurement
});
};
$('.zoomWrapper', this.node).css({
width: Math.round(settings.zoomWidth) + measurement
});
$('.zoomWrapperImage', this.node).css({
width: '100%',
height: Math.round(settings.zoomHeight) + measurement
});
$('.zoomWrapperTitle', this.node).css({
width: '100%',
position: 'absolute'
});
}
this.ieframe.css({
display: 'block',
position: "absolute",
left: this.ieframe.left,
top: this.ieframe.top,
zIndex: 99,
width: this.ieframe.width + measurement,
height: this.ieframe.height + measurement
});
$(this.node).css({
'left': left + measurement,
'top': top + measurement
});
})(jQuery, 'vh');

这是完整修改了整个库的演示: http://codepen.io/nicholasabrams/pen/GZrjRW

关于javascript - 响应式问题 JQzoom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35863318/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com