这是我第一次尝试使用 Mootools,所以我欢迎对代码提出批评。
我有一个动态图像列表,这些图像在“点击”事件上展开并在“mouseout”事件上收缩。代码在所有浏览器(FF、Safari、Chrome,甚至智能手机)中都可以正常工作,但在 IE9 中却不行(JS 已启用)
有类似问题或解决方案的人吗?
我打算使用灯箱效果,将更大更清晰的图像下载到页面中心,而不是仅仅调整小图像的大小。但是,如果 IE9 有问题,我会犹豫是否尝试这样做。
我已经使用上传提交编码了三种图像大小,因此灯箱可以使用较大的图像,但是,我在 mootools 中没有看到灯箱的任何内容,或者我错过了它?
$i = 0;
while($i < count($validate)) {
<div class="validate">
<div class="validate_image_<?php echo $validate[$i]['validate_type']; ?>">
<div class="validate_image" id="validate_image_wrapper_<?php echo $i; ?>">
<?php
if ($validate[$i]['validate_image_filename'] != '') {
if (file_exists(UPLOAD_DIR . 'validate_image/' . str_replace('.', '_medium.', $validate[$i]['validate_image_filename']))) {
echo '<img src="' . UPLOAD_URL . 'validate_image/' . str_replace('.', '_medium.', $validate[$i]['validate_image_filename']) . '" alt="Listing Image" />';
} else {
echo '<img src="' . UPLOAD_URL . 'validate_image/' . str_replace('.', '_large.', $validate[$i]['validate_image_filename']) . '" alt="Listing image" />';
}
} else {
?>
<img src="/images/no_image_posted_validate.png" alt="no image posted" />
<?php
}
?>
</div>
... remainder of HTML display code
function setupEnlargeImage() {
window.myFx = new Fx({
duration: 200,
transition: Fx.Transitions.Sine.easeOut
});
$$('.validate_image').addEvent('click', function() {
window.selectedImage = this.id;
myFx.start(1,2.0);
});
$$('.validate_image').addEvent('mouseout', function() {
window.selectedImage = this.id;
myFx.start(1.0,1);
});
myFx.set = function(value) {
var style = "scale(" + (value) + ")";
$(window.selectedImage).setStyles({
"-webkit-transform": style,
"-moz-transform": style,
"-o-transform": style,
"-ms-transform": style,
transform: style
});
}
}