使用锚点标签在点击时平滑显示大图
使用锚点标签在点击时平滑显示大图
提问于 2012-08-12 22:56:06
我正在使用这个很酷的图像滑块http://www.jscraft.net/demo/plugins/filters/，但正如你所看到的，使用这个滑块可能是一个problem...What，我基本上想做的是在每个较小的图像周围添加一个锚点标记(如滑块中所见)，当你点击图像时，它将弹出(或任何类型的平滑显示而不离开页面)较大尺寸的image...Any关于如何做的想法？也许使用jquery或javascript？请注意，我不想使用另一个滑块，也不喜欢混淆脚本…
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-13 02:11:39
好的好的我知道了this..here是你的代码..
Tha javascript：
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$('img.zoomable').css({ cursor: 'pointer' }).live('click', function () {
var img = $('img.bigImg');
var bigImg = $('<img />').css({
'max-width': '100%',
'max-height': '100%',
'display': 'inline'
//'margin': '-25% 0 0 -25%'
});
bigImg.attr({
src: img.attr('src'),
alt: img.attr('alt'),
title: img.attr('title')
});
var over = $('<div />').text(' ').css({
'height': '100%',
'width': '100%',
'background': 'rgba(0,0,0,.82)',
'position': 'fixed',
'top': 0,
'left': 0,
'opacity': 0.0,
'cursor': 'pointer',
'z-index': 9999,
'text-align': 'center'
}).append(bigImg).bind('click', function () {
$(this).fadeOut(300, function () {
$(this).remove();
});
}).insertAfter(this).animate({
'opacity': 1
}, 300);
});
</script>和HTML：
<img class="zoomable" src="smallImage.jpg" height="100" width="100"/>
<img class="bigImg" style="visibility:hidden" src="bigImage.jpg"/>您必须为每个图像添加两个链接。
Stack Overflow用户
发布于 2012-08-12 23:22:56
这是一个叫做Zoomable的插件。给你的图片一个名为"zoomable“的类，然后添加这个脚本
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$('img.zoomable').css({ cursor: 'pointer' }).live('click', function () {
var img = $(this);
var bigImg = $('<img />').css({
'max-width': '100%',
'max-height': '100%',
'display': 'inline'
//'margin': '-25% 0 0 -25%'
});
bigImg.attr({
src: img.attr('src'),
alt: img.attr('alt'),
title: img.attr('title')
});
var over = $('<div />').text(' ').css({
'height': '100%',
'width': '100%',
'background': 'rgba(0,0,0,.82)',
'position': 'fixed',
'top': 0,
'left': 0,
'opacity': 0.0,
'cursor': 'pointer',
'z-index': 9999,
'text-align': 'center'
}).append(bigImg).bind('click', function () {
$(this).fadeOut(300, function () {
$(this).remove();
});
}).insertAfter(this).animate({
'opacity': 1
}, 300);
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11923141
复制相关文章
相似问题
腾讯云开发者
