[英]Integration JqZoom and Jquery Ad Gallery
到目前為止,我在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');
// }
});
我上次的現場演出
我沒有看太多您的小提琴示例,但是據我了解,直到anchor <a>
標記以外,IE upto ver6不支持懸停。 另外,更高版本也報告了錯誤。
檢查此以獲取更多詳細信息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');
});
}
}
});
這是我的現場例子
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.