首页 > 代码库 > 模仿米折网商品图片自动翻页效果

模仿米折网商品图片自动翻页效果



function fun(){ $(".productimg").each(function() {//遍历所有图片 var othis = $(this),//当前图片对象 top = othis.offset().top - $(window).scrollTop();//计算图片top - 滚动条top if (top > $(window).height()) {//如果该图片不可见 return;//不管 } else { othis.attr(‘src‘, othis.attr(‘data-src‘)).removeAttr(‘data-src‘);//可见的时候把占位值替换 并删除占位属性 } });}fun();//$window.scroll(fn).resize(fn);//绑定事件$(window).bind("scroll",function(){fun(); // 判断窗口的滚动条是否接近页面底部 if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {$.ajax({ulr:"../mainpage/default.aspx",data:"id=1",dataType:"html",type:"post",success:function(data,status){var ss="";for(var i=0;i<2;i++){ ss+="<div class=‘divRow‘>"; for(var j=0;j<4;j++) { ss+="<a href=http://www.mamicode.com/‘../product/product.aspx‘ target=‘_blank‘>" +"<div class=‘divMask‘></div>" +"<div class=‘divToolTip‘>【包邮】华为荣耀3X</div>" +"<div class=‘divProMsg‘>" +"<span class=‘spanPrice‘><b class=‘bFH‘>¥</b><b class=‘bY‘>30</b><b class=‘bSH‘>.99</b></span>" +"<span class=‘spanCX‘><span class=‘spanCXXX‘>5.0折</span> " +"<span class=‘spanYJ‘><strike>¥50.50</strike></span></span><span class=‘spanQG‘>546人已开抢</span>" +"<span class=‘spanQQG‘><b>去抢购</b></span></div></a>"; } ss+="</div>"}$(".div_ajax").append(ss);},error: function(xmlHttp,status,msg){$(".div_ajax").html("append");}});

html代码:

             <div class="div_ajax">                           <%for (int i = 0; i < RowCount; i++)                          { %>                        <div class="divRow">                            <%for (int j = 0; j < ColCount; j++)                              { %>                            <a href=‘../product/product.aspx‘ target=‘_blank‘>                                <img class=‘productimg‘ data-src=‘../image/05.jpg‘ src=‘http://s0.husor.cn/image/blank.png‘ alt=‘sadfsafsadff‘>                                <div class=‘divMask‘>                                </div>                                <div class=‘divToolTip‘>                                    【包邮】华为荣耀3X</div>                                <div class=‘divProMsg‘>                                    <span class=‘spanPrice‘><b class=‘bFH‘></b> <b class=‘bY‘>30</b> <b class=‘bSH‘>.99</b>                                    </span><span class=‘spanCX‘><span class=‘spanCXXX‘>5.0折</span> <span class=‘spanYJ‘>                                        <strike>¥50.50</strike></span> </span><span class=‘spanQG‘>546人已开抢</span> <span class=‘spanQQG‘>                                            <b>去抢购</b></span>                                </div>                            </a>                            <%} %>                        </div>                        <div class=‘divFGX‘>                        </div>                        <%} %>                    </div>

css代码:

.productimg{     width:100%;     height:220px;    border:0px;    margin-top:0px;    position:relative;    background:url(‘../image/loading.gif‘) no-repeat center center; }

 

模仿米折网商品图片自动翻页效果