• 网页图片自适应


        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>
    

      

  • 相关阅读:
    尘埃里的路人乙
    SlidingMenu 插件的使用 二
    观察者模式
    Android SlidingMenu插件的使用
    Android4.2 的Http 多线程 网络传输
    Sliverlight界面研究1
    Sliverlight界面研究2
    图片切换效果(定时+编号)
    管理模型 RACI模型
    Enable NLA in XP
  • 原文地址:https://www.cnblogs.com/wanggc/p/4609797.html
Copyright © 2020-2023  润新知