@{ Layout = null;}
<!DOCTYPE html>
<html><head> @*<meta name="viewport" content="width =device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />*@ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title></title> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/scrollLazy.js"></script> <script type="text/javascript"> function myfun() { var pId = GetQueryString("productId"); $.ajax({ type: "POST", url: "/DisplayDetailImages/GetDetailImages", data: { productId: pId }, datatype: "html", success: function (data) { if (data == "") { alert("暂无详情！！"); } var html = ""; html += "<p>" var imgsplit = data.split(','); for (var i = 0; i < imgsplit.length - 1; i++) { html += imgsplit[i]; } html += "</p>" $(".details_bottom").html(''); $(".details_bottom").html(html);
for (var i = 0; i < imgsplit.length - 1; i++) { $("img").eq(i).attr('data-src', $("img").eq(i).attr('src')); $("img").eq(i).attr('src', 'xxxx'); } new LazyScroll({ 'wrapId': 'body' }); var imglist = document.getElementsByTagName("img"); //安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持 var _width; doDraw();
window.onresize = function () { //捕捉屏幕窗口变化，始终保证图片根据屏幕宽度合理显示 doDraw(); }
function doDraw() { _width = window.innerWidth; for (var i = 0, len = imglist.length; i < len; i++) { DrawImage(imglist[i], _width); } }
function DrawImage(ImgD, _width) { var image = new Image(); image.src = ImgD.src; image.onload = function () { //限制，只对宽高都大于30的图片做显示处理，换成你想要的宽度。 if (image.width > 30 && image.height > 30) { if (image.width > _width) { ImgD.width = _width; ImgD.height = (image.height * _width) / image.width; } else { ImgD.width = image.width; ImgD.height = image.height; }
} } } }, error: function () { alert("error"); } }); } function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } window.onload = myfun; </script> <style type="text/css"> img { max-width: 100%; -ms-interpolation-mode: bicubic; vertical-align: bottom; } </style>
</head><body id="body">
<section class="details_bottom"></section>
<script src="~/Scripts/scrollLazy.js"></script></body></html>
posted on 2015-07-22 22:43 dr_twilight 阅读( ...) 评论( ...) 编辑 收藏转载于:https://www.cnblogs.com/niejun/p/4668921.html
相关资源：图片上下左右居中不变形解决方案