可变范围&事件触发匿名函数
Variable scope & event triggered anonymous functions
我正在通过滚动轮创建图像缩放,但在函数之间传递变量时遇到麻烦。
在我调用img_scroll()
函数之前,我需要得到我想放大和缩小的图像的最小和最大尺寸。为了获得尺寸,我需要等待图像加载。
现在我等待图像加载,调用dimensions函数,然后一旦尺寸加载,我调用scroll函数。但是现在我在把变量传递给滚动函数时遇到了麻烦。
zoom = 0.01;
$(document).ready(function(){
$("#img_wrapper").imagesLoaded(function(){
getImgSizes();
});
});
function getMinImgSize() {
if ($("#img_wrapper img").width() <= $("#img_wrapper img").height()) {
$("#img_wrapper img").css("width", "100%");
} else {
$("#img_wrapper img").css("height", "100%");
}
min_width = $("#img_wrapper img").width();
min_height = $("#img_wrapper img").height();
return {height: min_height, width: min_width};
}
function getImgSizes() {
var newImg = new Image();
var width, height;
imgSrc = $("#img_wrapper img")[0].src;
minDimensions = getMinImgSize();
newImg.onload = function(minDimensions) { //incorect way to pass varaible to anonymous function
originalHeight = newImg.height;
originalWidth = newImg.width;
maxDimensions = {height: originalHeight, width: originalWidth};
img_scroll(minDimensions, maxDimensions);
}
newImg.src = imgSrc; // this must be done AFTER setting onload
}
function img_scroll(minDimensions, maxDimensions){
var minDimensions = minDimensions;
var maxDimensions = maxDimensions;
$('#img_wrapper').mousewheel(function(event, delta, deltaX, deltaY) {
console.log(delta, deltaX, deltaY);
if (deltaY < 0) {
if ($("#img_wrapper img").width < maxDimensions.width) {
$("#img_wrapper img").width($("#img_wrapper img").width()*(1+zoom));
$("#img_wrapper img").height($("#img_wrapper img").height()*(1+zoom));
} else {
$("#img_wrapper img").width(maxDimensions.width);
$("#img_wrapper img").height(maxDimensions.height);
}
} else {
if ($("#img_wrapper img").width > minDimensions.width) {
$("#img_wrapper img").width($("#img_wrapper img").width()*(1-zoom));
$("#img_wrapper img").height($("#img_wrapper img").height()*(1-zoom));
} else {
$("#img_wrapper img").width(minDimensions.width);
$("#img_wrapper img").height(minDimensions.height);
}
}
});
}
关于如何通过min &
通过闭包在Javascript中的工作方式,您的匿名函数可以使用minDimensions
而无需显式传递。这应该可以工作:
function getImgSizes() {
var newImg = new Image();
var width, height;
var imgSrc = $("#img_wrapper img")[0].src;
var minDimensions = getMinImgSize();
newImg.onload = function() {
var originalHeight = newImg.height;
var originalWidth = newImg.width;
var maxDimensions = {height: originalHeight, width: originalWidth};
img_scroll(minDimensions, maxDimensions);
}
newImg.src = imgSrc; // this must be done AFTER setting onload
}
编辑:使用var
来防止全局变量
相关文章:
- 双条件jQuery函数事件
- 将函数事件绑定到更改函数的复选框/标签
- 从c#代码后面触发jQuery函数/事件
- 正在解码函数(事件){}的JavaScript语法
- 如何防止我的$('form').submit(函数(事件))应用于某些表单
- 访问PDF.js查看器函数/事件
- 从内部调用 JavaScript 函数事件
- JavaScript/jQuery调用函数事件
- jquery.live('点击',函数(事件)在页面加载时只工作一次
- 如何在JavaScript中跟踪回调函数事件
- 正确删除匿名函数事件处理程序
- jQuery:将 $(this) 传递给命名函数事件处理程序
- 函数(事件)变量是否可以不永久更改实例变量的内容
- Javascript函数事件没有按顺序触发
- 如何按类循环函数事件
- jQuery与对象的绑定函数'事件处理程序
- 函数(事件)在一个Opera上下文菜单扩展
- 用meteor.js响应式调用js函数/事件
- 缩短JavaScript函数事件
- 将onchange函数事件附加到变量