• 移动端 图片不变形


    @{
    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- 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>

  • 相关阅读:
    webpack(4) 配置
    query 与 params 使用
    git 操作
    一个vue练手的小项目
    9/10案例
    9/9python案例
    jmeter录制移动端脚本(二) --- badboy工具
    用jmeter连接数据库并进行操作
    jmeter录制脚本(一) --本身自带功能
    Jmeter组件使用
  • 原文地址:https://www.cnblogs.com/niejun/p/4668921.html
Copyright © 2020-2023  润新知