到目前为止,我正在做的事情在Firefox和webkit浏览器(safari和chrome,未在maxthone中测试)中工作得很好,实际上这很简单,我只是添加一个事件悬停,更改图库中的宽度和高度以获得空间,并让带有Jqzoom缩放的图像出现。
这是所需的所有JavaScript代码
$(document).ready(function () {
$('.ad-gallery').adGallery({
callbacks:
{
afterImageVisible: function () {
$('div.ad-image a').jqzoom({
zoomType: 'reverse',
preloadText: locale.gallery.preloadText,
title: false,
zoomWidth: 500,
zoomHeight: 300,
preloadImages: true
});
$("div.zoomPad img").hover(function () {
var $container = $("div.ad-image");
$container.css('width', '850px').css('height', '302px');
$container.parent().css('width', '850px').css('height', '302px');
$('div.ad-prev').css('width', '25px');
}, function () {
var $container = $("div.ad-image");
$container.css('width', '300px').css('height', '300px');
$container.parent().css('width', '300px').css('height', '300px');
$('div.ad-prev').css('width', '25px');
});
}
}
});
});
现在我的问题是为什么这在IE中不起作用?我开始调试,但我没有看到任何错误,这让我发疯,因为它触发了悬停事件
这是我的现场示例
更新
测试我意识到它给我带来的麻烦的事件是鼠标出来,所以我改变了 至少在我尝试mouseleave
和mouseout
事件mouseover
或mouseenter
工作的代码。 仍然没有好的结果
$('.ad-gallery').adGallery({
callbacks:
{
afterImageVisible: function () {
$('div.ad-image a').jqzoom({
zoomType: 'reverse',
preloadText: locale.gallery.preloadText,
title: false,
zoomWidth: 500,
zoomHeight: 300,
preloadImages: true
});
if (!$.browser.msie) {
$("div.zoomPad img").hover(function () {
var $container = $("div.ad-image");
$container.css('width', '850px').css('height', '302px');
$container.parent().css('width', '850px').css('height', '302px');
$('div.ad-prev').css('width', '25px');
}, function () {
var $container = $("div.ad-image");
$container.css('width', '300px').css('height', '300px');
$container.parent().css('width', '300px').css('height', '300px');
$('div.ad-prev').css('width', '25px');
});
}
else {
$("div.zoomPad img").on({
mouseenter: function () {
var $container = $("div.ad-image");
$container.css('width', '850px').css('height', '302px');
$container.parent().css('width', '850px').css('height', '302px');
$('div.ad-prev').css('width', '25px');
}
// ,mouseleave: function () {
// var $container = $("div.ad-image");
// $container.css('width', '300px').css('height', '300px');
// $container.parent().css('width', '300px').css('height', '300px');
// $('div.ad-prev').css('width', '25px');
// }
});
我的最新版本的Live Exmaple
看太多你的小提琴示例,但据我所知,IE 直到 ver6 除了anchor <a>
标签外不支持悬停。更高版本也报告了错误。
查看此内容以获取更多详细信息 http://reference.sitepoint.com/css/pseudoclass-hover
最后我通过更改选择器和附加侦听器的方式来解决问题
$('.ad-gallery').adGallery({
animate_first_image: true,
callbacks: {
afterImageVisible: function() {
$('div.ad-image a').jqzoom({
zoomType: 'standar',
preloadText: locale.gallery.preloadText,
title: false,
zoomWidth: 500,
zoomHeight: 300,
preloadImages: true
});
$("div.zoomPad").mouseenter(function() {
var $container = $("div.ad-image");
$container.css('width', '850px').css('height', '350px');
$container.parent().css('width', '850px').css('height', '350px');
$('div.ad-prev').css('width', '25px');
}).mouseleave(function() {
var $container = $("div.ad-image");
$container.css('width', '300px').css('height', '300px');
$container.parent().css('width', '300px').css('height', '300px');
$('div.ad-prev').css('width', '25px');
});
}
}
});
这是我的现场示例
http://jsfiddle.net/justelnegro/KU6NU/20/