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
- jquery 动态设置图片居中显示
- 设置滑动视图中图片居中显示
- jQuery实现图片垂直居中,js怎样实现图片水平垂直居中显示
- 实现动态加载的图片页面中纵向居中显示
- listview view属性设置为LargeIcon时,图片居中显示
- css背景设置,让套图中某张图片居中显示的例子
- Android radioButton只设置图片是居中显示
- 设置按钮的contentMode, 让其图片居中填充显示
- UIButton 设置图片和文字上下居中显示
- 图片截取居中显示
- 图片的居中显示
- 图片时时居中显示
- jQuery动态改变图片显示大小
- 设置窗口居中显示
- css图片设置居中
- css图片图片居中显示
- jquery 居中显示自定义方法
- jquery 弹出框居中显示
- Running Oracle ADF application on High availability (HA) architecture by Vinay Kumar
- Linux 用dd生成指定大小的文件
- MSVC CRT的全局构造和析构
- Android HttpURLConnection 下载xml文件时候 出现ioexception
- 提取VS的Win32SDk用C/C++编译器 (续)——使用方法
- jquery 动态设置图片居中显示
- 我的MYSQL学习心得(1) 简单语法
- JavaScript实现图片上标记多点区域
- AVFoundation的使用
- 登陆页面的用户信息保存实现
- 2- Linux系统入门
- ios开发网络篇 - 使用ASI框架进行文件下载
- Java语言描述:分支限界法之单源最短路径问题(全网独家)
- Android编码规范