imgPrewiew 是一个基于jQuery的图片预览插件,它能让你不点击链接的情况下预览图片,而且可以为域名链接增加预览图
实现起来很简单,首先加载 imgPreview.js ,然后自定义需要的效果:
$(document).ready(function() {
$(‘ul#first a’).imgPreview({
containerID: ‘imgPreviewWithStyles’,
//srcAttr: ‘rel’,
imgCSS:{ height: 200
//设置图片的高
},
onShow: function(link){
$(link).stop().animate({opacity:0.4});
//链接的淡入淡出效果
$(‘<span>’ + $(link).text() + ‘</span>’).appendTo(this);
//增加图片标题
},
onHide: function(link){
$(link).stop().animate({opacity:1});
$(‘span’, this).remove();
}
});
$(‘ul#second a’).imgPreview({
containerID: ‘imgPreviewWithStyles’,
srcAttr: ‘rel’,
onShow: function(link){
$(link).stop().animate({opacity:0.4});
$(‘<span>’ + $(link).text() + ‘</span>’).appendTo(this);
},
onLoad: function(){
$(this).animate({opacity:1}, 300);
},
onHide: function(link){
$(link).stop().animate({opacity:1});
$(‘span’, this).remove();
}
});
});
$(‘ul#first a’).imgPreview({
containerID: ‘imgPreviewWithStyles’,
//srcAttr: ‘rel’,
imgCSS:{ height: 200
//设置图片的高
},
onShow: function(link){
$(link).stop().animate({opacity:0.4});
//链接的淡入淡出效果
$(‘<span>’ + $(link).text() + ‘</span>’).appendTo(this);
//增加图片标题
},
onHide: function(link){
$(link).stop().animate({opacity:1});
$(‘span’, this).remove();
}
});
$(‘ul#second a’).imgPreview({
containerID: ‘imgPreviewWithStyles’,
srcAttr: ‘rel’,
onShow: function(link){
$(link).stop().animate({opacity:0.4});
$(‘<span>’ + $(link).text() + ‘</span>’).appendTo(this);
},
onLoad: function(){
$(this).animate({opacity:1}, 300);
},
onHide: function(link){
$(link).stop().animate({opacity:1});
$(‘span’, this).remove();
}
});
});
