點擊放大圖片或者文字
阿新 • • 發佈：2017-12-05
.cn each ngxin 圖片 效果圖 jquery null this指向 float
在鑫旭大神博客，看到這個插件的效果，覺得效果真的好好啊，佩服佩服呀。
不禁覺得大神的Css功底真的很深。再次佩服。
貼出研究過的插件源碼，裏面註釋都是我自己琢磨的，如有不同意見歡迎探討。
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/
點擊放大圖片或者文字