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>