模仿米折网商品图片自动翻页效果
2015-01-20 16:50
423 查看
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; }
相关文章推荐
- 模仿优酷Android客户端图片左右滑动(自动切换)效果
- Android自定义控件显示多页图片展示效果并自动翻页适合广告展示
- JS模仿腾讯图片站的图片翻页按钮效果完整实例
- 一个自动动态播放图片的类(downmoon)新增图片效果
- 图片翻页滚动效果
- 图片翻页滚动效果(JavaScript)
- 用纯CSS写的图片切换,翻页效果..
- 模仿的DropDownList的效果,支持图片,多列,换行
- 一个模仿图片透明渐变做的表格颜色渐变效果 js脚本特效
- 点图片上一页下一页翻页效果
- 一个模仿图片透明渐变做的表格颜色渐变效果
- [转]下面是模仿的DropDownList的效果,支持图片,多列,换行等
- 图片展示效果,不能自动浏览,分组滚动
- 做出的一个图片的自动展示效果(JS版本)
- 图片实现翻页效果
- 有链接的图片翻页效果及点击放大效果
- 图片翻页滚动效果(JavaScript)
- 首页图片翻页效果
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]