zoukankan      html  css  js  c++  java
  • 网页图片自适应

        function setImgMiddle(img) {  
            var $img = $(img),  
                $panel = $(img).parent();//图片容器  
      
            var img_width = $img.width(),img_height = $img.height(),//图片宽高  
                panel_width = $panel.width(), panel_height = $panel.height(); //图片容器宽高  
      
            if(panel_width/panel_height < img_width/img_height){  
                $img.width(panel_width);  
                $img.css('margin-top', (panel_height - $img.height()) * 0.5);  
            }else{  
                $img.height(panel_height);  
                $img.css('margin-left', (panel_width - $img.width()) * 0.5);  
            }  
            $img.fadeIn(100);  
        }
    
        $(function () {
            if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0") {
                $(".imgClick").click(function () {
                    var _href = $(this).parent().parent().attr('href');
                    window.open(_href);
                });
            }
        });
    

      前台页面 

                <asp:Repeater ID="rptgzsw" runat="server">
                            <ItemTemplate>
                                <li><a href="/Product/Product.aspx?id=<%#Eval("id") %>" title="<%#Eval("name") %>">
                                    <div style="height: 200px">
                                        <img src="<%#Eval("fristpic") %>" onload="setImgMiddle(this);" alt="<%#Eval("name") %>" class="imgClick" />
                                    </div>
                                </a>
                                    <p>
                                        <strong>¥<%#Eval("price") %></strong></p>
                                    <p>
                                        <a href="/Product/Product.aspx?id=<%#Eval("id") %>" title="<%#Eval("name") %>">
                                            <%#Ctrl.Comm.Str.StrCut(Eval("Name").ToString(),30)%></a>
                                    </p>
                                </li>
                            </ItemTemplate>
                        </asp:Repeater>
    

      

  • 相关阅读:
    Windows通过DOS命令进入MySQL的方法
    php使用phpqrcode生成二维码
    js字符串转换为Json对象的三种写法
    Linux系统中RPM软件包安装语法
    Linux系统中软件安装方式以及特点
    vue-生存周期
    echart力导向图
    css样式,高斯模糊
    某布局
    跨浏览器兼容
  • 原文地址:https://www.cnblogs.com/wanggc/p/4609797.html
Copyright © 2011-2022 走看看