码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-01-20 17:46:37      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:



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=‘../product/product.aspx‘ target=‘_blank‘><img class=‘productimg‘ data-src=‘../image/051.jpg‘ src=‘http://s0.husor.cn/image/blank.png‘ >" +"<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; 
}

 

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

标签:

原文地址:http://www.cnblogs.com/engine/p/4236510.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!