点击放大图片或者文字
Posted 柠檬张先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击放大图片或者文字相关的知识，希望对你有一定的参考价值。
在鑫旭大神博客，看到这个插件的效果，觉得效果真的好好啊，佩服佩服呀。
不禁觉得大神的Css功底真的很深。再次佩服。
贴出研究过的插件源码，里面注释都是我自己琢磨的，如有不同意见欢迎探讨。
点击看效果demo
jQuery.fn.fancyZoom = function(options){
var options = options || {}; //初始化参数
var directory = options && options.directory ? options.directory : \'images\'; //默认是方法图片的标志
var zooming = false; //用来判断此时此刻是否有zooming在展示
//没有zoom就建造一个插入
if ($(\'#zoom\').length == 0) {
var html = \'<div class="round_shade_box" id="zoom"> \\
<div class="round_shade_top"> \\
<span class="round_shade_topleft"> \\</span> \\
<span class="round_shade_topright"> \\</span> \\
</div> \\
<div class="round_shade_centerleft"> \\
<div class="round_shade_centerright"> \\
<div class="round_shade_center" id="zoom_content"> \\</div> \\
</div> \\
</div> \\
<div class="round_shade_bottom"> \\
<span class="round_shade_bottomleft"> \\</span> \\
<span class="round_shade_bottomright"> \\</span> \\
</div> \\
<a href="#close" class="round_box_close" id="zoom_close">关闭</a> \\
</div>\';
$(\'body\').append(html);
$(\'html\').click(function(e){if($(e.target).parents(\'#zoom:visible\').length == 0) hide();}); //点击除了zoom其他地方则隐藏
$(document).keyup(function(event){
if (event.keyCode == 27 && $(\'#zoom:visible\').length > 0) hide();
});
$(\'#zoom_close\').click(hide); //给关闭按钮赋予点击事件来隐藏zoom
}
var zoom = $(\'#zoom\');
var zoom_close = $(\'#zoom_close\');
var zoom_content = $(\'#zoom_content\');
//这里的this指向调用fancyZoom的$对象
this.each(function(i) {
//$对象里所有指向到的放大div先隐藏，然后分别赋予点击事件来展示
$($(this).attr(\'href\')).hide();
$(this).click(show);
});
$(\'#zoom_close\').click(hide); //关闭按钮赋予点击事件来隐藏
return this; //返回this进行链式调用
//点击了调用了fancyZoom的元素
function show(e) {
if (zooming) return false; //假如zooming = true,则不调用
zooming = true; //先改变zooming的值
//获取指向元素的输入参数长宽值，放大图片的情况下zoom_width， zoom_height为undefined
var content_div = $($(this).attr(\'href\'));
var zoom_width = options.width;
var zoom_height = options.height;
//获取页面长度宽度和浏览器滚动长度高度
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
var window_size = {\'width\':width, \'height\':height, \'x\':x, \'y\':y} //保存以上四个参数
//放大图片的情况下对指向元素长宽各增加40
var width = (zoom_width || content_div.width()) + 40;
var height = (zoom_height || content_div.height()) + 40;
var d = window_size;
// ensure that newTop is at least 0 so it doesn\'t hide close button
var newTop = Math.max((d.height/2) - (height/2) + y, 0); //获取绝对定位的top，
var newLeft = (d.width/2) - (width/2); //获取绝对定位的left
var curTop = e.pageY; //获取点击事件对象现在的鼠标位置
var curLeft = e.pageX;
//关闭按钮赋予相关属性
zoom_close.attr(\'curTop\', curTop);
zoom_close.attr(\'curLeft\', curLeft);
zoom_close.attr(\'scaleImg\', options.scaleImg ? \'true\' : \'false\');
//先隐藏，在赋予样式，top&left赋予点击事件对象现在的鼠标位置
$(\'#zoom\').hide().css({
position : \'absolute\',
top : curTop + \'px\',
left : curLeft + \'px\',
width : \'1px\',
height : \'1px\'
});
zoom_close.hide();
if (options.closeOnClick) {
$(\'#zoom\').click(hide);
}
if (options.scaleImg) {
zoom_content.html(content_div.html()); //指向元素的innerHTML复制给zoom content
$(\'#zoom_content img\').css(\'width\', \'100%\'); //zoom content里面的img长度100%
} else {
zoom_content.html(\'\'); //不缩放图片则直接空html
}
//最后展示zoom，有个动画效果
$(\'#zoom\').animate({
top : newTop + \'px\',
left : newLeft + \'px\',
opacity : "show",
width : width,
height : height
}, 500, null, function() {
//动画结束回调，缩放图片的情况复制html
//展示关闭按钮
//恢复初始值zooming
if (options.scaleImg != true) {
zoom_content.html(content_div.html());
}
zoom_close.show();
zooming = false;
})
return false;
}
function hide() {
if (zooming) return false;
zooming = true;
$(\'#zoom\').unbind(\'click\');
if (zoom_close.attr(\'scaleImg\') != \'true\') {
zoom_content.html(\'\');
}
zoom_close.hide();
$(\'#zoom\').animate({
top : zoom_close.attr(\'curTop\') + \'px\',
left : zoom_close.attr(\'curLeft\') + \'px\',
opacity : "hide",
width : \'1px\',
height : \'1px\'
}, 500, null, function() {
if (zoom_close.attr(\'scaleImg\') == \'true\') {
zoom_content.html(\'\');
}
zooming = false;
});
return false;
}
}
demo源码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery-单击文字或图片内容放大显示且含圆角投影效果</title>
<style type="text/css">
/*自适应圆角投影*/
.round_shade_box {
width: 1px;
height: 1px;
font-size: 0;
display: none;
_background: white;
_border: 1px solid #cccccc;
}
.round_shade_top {
margin: 0 12px 0 10px;
background: url(../image/zxx_round_shade.png) repeat-x -20px -40px;
_background: white;
zoom: 1;
}
.round_shade_topleft {
width: 11px;
height: 10px;
background: url(../image/zxx_round_shade.png) no-repeat 0 0;
_background: none;
float: left;
margin-left: -11px;
position: relative;
}
.round_shade_topright {
width: 12px;
height: 10px;
background: url(../image/zxx_round_shade.png) no-repeat -29px 0;
_background: none;
float: right;
margin-right: -12px;
position: relative;
}
.round_shade_centerleft {
background: url(../image/zxx_round_shade.png) no-repeat 0 -1580px;
_background: none;
}
.round_shade_centerright {
background: url(../image/zxx_round_shade.png) no-repeat right -80px;
_background: none;
}
.round_shade_center {
font-size: 14px;
margin: 0 12px 0 10px;
padding: 10px;
background: white;
letter-spacing: 1px;
line-height: 1.5;
}
.round_shade_bottom {
margin: 0 12px 0 11px;
background: url(../image/zxx_round_shade.png) repeat-x -20px bottom;
_background: white;
zoom: 1;
}
.round_shade_bottomleft {
width: 11px;
height: 10px;
background: url(../image/zxx_round_shade.png) no-repeat 0 -30px;
_background: none;
float: left;
margin-left: -11px;
position: relative;
}
.round_shade_bottomright {
width: 12px;
height: 10px;
background: url(../image/zxx_round_shade.png) no-repeat -29px -30px;
_background: none;
float: right;
margin-right: -12px;
position: relative;
}
.round_shade_top:after,
.round_shade_bottom:after,
.zxx_zoom_box:after {
display: block;
content: ".";
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.round_box_close {
padding: 2px 5px;
font-size: 12px;
color: #ffffff;
text-decoration: none;
border: 1px solid #cccccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #000000;
opacity: 0.8;
filter: alpha(opacity=80);
position: absolute;
right: -5px;
top: -5px;
}
.round_box_close:hover {
opacity: 0.95;
filter: alpha(opacity=95);
}
/*自适应圆角投影结束*/
.zxx_zoom_left {
width: 45%;
/* float:left; */
margin-top: 20px;
/* border-right:1px solid #dddddd; */
}
.zxx_zoom_left h4 {
margin: 5px 0px 15px 5px;
font-size: 1.1em;
}
.small_pic {
display: inline-block;
width: 48%;
/* height:150px; */
font-size: 120px;
text-align: center;
*display: inline;
zoom: 1;
vertical-align: middle;
}
.small_pic img {
padding: 3px;
background: #ffffff;
border: 1px solid #cccccc;
vertical-align: middle;
}
.zxx_zoom_right {
width: 50%;
/* float:left; */
margin-top: 20px;
/* padding-left:2%; */
}
.zxx_zoom_right h4 {
margin: 5px 0px;
font-size: 1.1em;
}
.zxx_zoom_right p.zxx_zoom_word {
line-height: 1.5;
font-size: 1.05em;
letter-spacing: 1px;
margin: 0 0 35px;
padding-top: 5px;
}
.biggerImg {
width: 400px;
height: 330px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/content_zoom.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(\'div.small_pic a\').fancyZoom({
scaleImg: true,
closeOnClick: true
});
$(\'#zoom_word_1\').fancyZoom({
width: 400,
height: 200
});
$(\'#zoom_word_2\').fancyZoom();
$(\'#zoom_flash\').fancyZoom();
});
</script>
</head>
<body>
<h3 class="zxx_title">jQuery-单击文字或图片内容放大显示且含圆角投影效果</h3>
<div class="zxx_main_con fix">
<div class="zxx_zoom_left">
<h4>图片的放大</h4>
<div class="small_pic">
<a href="#pic_one">
<img src="../../pic&wordLineInMiddle/images/img2.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_two">
<img src="../../pic&wordLineInMiddle/images/img4.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_three">
<img src="../../pic&wordLineInMiddle/images/img3.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_four">
<img src="../../pic&wordLineInMiddle/images/img7.jpg" />
</a>
</div>
</div>
<div class="zxx_zoom_right">
<h4>文字内容的放大</h4>
<p class="zxx_zoom_word">这里文字内容放大的层的宽度是需要给定值进行控制的，因为图片的高度和宽度可以获取到，而内容不确定的DIV层的高宽是获取不到了，给定高宽值，然后文字内容就会在这块区域内显示。比如说，
<a href="#zoom_word_one"
id="zoom_word_1">400像素的放大弹出层</a>。
<br />如果你觉得这个宽度不够，你可以设置宽度值更大些，例如，
<a href="#zoom_word_two" id="zoom_word_2">800像素的宽度</a>。</p>
<!-- <h4>视频或flash的放大</h4>
<p class="zxx_zoom_word">
这里还可以以浮动层的形式显示flash动画或者是视频。例如，<a href="#zoom_flash_one" id="zoom_flash">简约时钟(swf)</a>
</p> -->
</div>
</div>
<!-- 要放大显示的div -->
<div id="pic_one" class="biggerImg" style="display:none;">
<img src="../../pic&wordLineInMiddle/images/img2.jpg" />
</div>
<div id="pic_two" class="biggerImg" style="display:none;">
<img src="../../pic&wordLineInMiddle/images/img4.jpg" />
</div>
<div id="pic_three" class="biggerImg" style="display:none;">
<img src="../../pic&wordLineInMiddle/images/img3.jpg" />
</div>
<div id="pic_four" class="biggerImg" style="display:none;">
<img src="../../pic&wordLineInMiddle/images/img7.jpg" />
</div>
<div id="zoom_word_one" style="display:none;">400像素宽度层示例：这里文字内容放大的层的宽度是需要给定值进行控制的，因为图片的高度和宽度可以获取到，而内容不确定的DIV层的高宽是获取不到了，给定高宽值，然后文字内容就会在这块区域内显示。</div>
<div id="zoom_word_two" style="width:800px; display:none;">800像素宽度层示例：这里文字内容放大的层的宽度是需要给定值进行控制的，因为图片的高度和宽度可以获取到，而内容不确定的DIV层的高宽是获取不到了，给定高宽值，然后文字内容就会在这块区域内显示。</div>
<div id="zoom_flash_one" style="display:none;">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
<param name="movie" value="../flash/as3_clock_2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="../flash/as3_clock_2.swf" width="550" height="400">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="../../Scripts/expressInstall.swf" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
效果图
点击左上角图片进行该图片放大。
个人总结：CSS写的真的很好，工整而且美观有效，兼容性很好。
但是JS插件其实个人认为还有待改进，在实际行为中是先在HTML里写好放大元素来进行控制。
可以改成直接从点击元素里抽取元素进行html复制会更好。
技术参考：http://www.zhangxinxu.com/
以上是关于点击放大图片或者文字的主要内容，如果未能解决你的问题，请参考以下文章