首页 > 代码库 > 模仿米折网商品图片自动翻页效果
模仿米折网商品图片自动翻页效果
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; }
模仿米折网商品图片自动翻页效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。