您的位置:首页 > 其它

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

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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: