jquery 动态设置图片居中显示

来源:互联网 发布:javascript格式化输出 编辑:程序博客网 时间:2024/06/05 12:03
    <img class="imgPos" name="img" alt="" />    <div class="mask"></div>/*image enlargement*/.imgPos {  position: absolute;  display: none;  z-index: 1000000000;}.mask {  display: none;  z-index: 999999999;  background-color: #000;  position: absolute;  top: 0;  left: 0;  opacity: 0.8;}/*image enlargement*/


 function SetPosition(width,height){var Wwidth = $(window).width();var Wheight = $(window).height();var dwidth = $(document).outerWidth();var dheight = $(document).outerHeight();var scrollHeight = $(document).scrollTop();var scrollLeft = $(document).scrollLeft();/*var width = $("img.imgPos").width();var height = $("img.imgPos").height();*/var ratio=width/height;var imgLeft;var imgTop;//Èç¹ûͼƬµÄ¿í¶È>ÆÁÄ»µÄ¿í¶È=>ͼƬµÄ¿í¶ÈÖ±½Ó=ÆÁÄ»µÄ¿í¶È£¬×óÆ«ÒÆ£½0if(Wwidth - width<=0){width=Wwidth;height=width/ratio;//ͬʱ¸ù¾ÝÔ­³ß´çÐÞ¸ÄͼƬ¸ß¶È.imgLeft=scrollLeft;}else{imgLeft = scrollLeft + (Wwidth - width) / 2;}//Èç¹ûͼƬµÄ¸ß¶È>ÆÁÄ»µÄ¸ß¶È=>ͼƬµÄ¸ß¶ÈÖ±½Ó=ÆÁÄ»µÄ¸ß¶È£¬ÉÏÆ«ÒÆ£½0if(Wheight - height<=0){imgTop=scrollHeight;}else{imgTop=scrollHeight + (Wheight - height) / 2;}/*var maskWidth = dwidth;if (dwidth < width) {imgLeft = 0;maskWidth = width;}*/$("img.imgPos").css({"top":imgTop,"left":imgLeft,"width":width,"height":height});$("div.mask").css({"width": dwidth,"height": dheight});$("div.mask").show();$("img.imgPos").fadeIn("fast")}$(function () {   //Switch image when load image error!/*ÒÔ·ÀÌØÊâ¸ñʽÎÞ·¨ÏÔʾͼƬ*/$("img.imgPos").error(function () {var filename = this.src;var extension = filename.substr(filename.lastIndexOf("."));var newfile = filename.substring(0, filename.lastIndexOf("."));if (extension == ".jpg") {newfile += ".png";} else {newfile += ".jpg";}this.src = newfile;})/**/$("img.imgPos").load(function () {var windowHeight = $(window).height();var windowWidth = $(window).width();var scollerHeight = $(document).scrollTop();var scollerWidth = $(document).scrollLeft();var img = new Image();img.src = this.src;if (img.complete) {SetPosition(img.width,img.height);} else {img.onload = function () {img.onload = null;};};})$("div.row .news-detail-txt-area img").bind({"click": function () {/**/var filename = this.src;var b = filename.lastIndexOf("_");var big = filename;//СͼƬ´ó¶¼ÊÇJPG¸ñʽif (big.lastIndexOf("x") > 0 && b > 0) {var e = filename.lastIndexOf(".");var replaceStr = filename.substring(b, e);big = filename.replace(replaceStr, "");big = big.substring(0, big.lastIndexOf("."))+".png";//ԭͼƬÊÇ´ó¶¼ÊÇPNG¸ñʽ¡£}$("img.imgPos").attr("src",big);},"mouseenter": function () {$(this).css("cursor", "pointer");}})$("div.mask,img.imgPos").bind("click", function () {$("div.mask,img.imgPos").hide();$("img.imgPos").removeAttr("src");$("img.imgPos").removeAttr("style");})});



0 0
原创粉丝点击