模仿米折网商品图片自动翻页效果
function fun(){$(".productimg").each(function() {//遍历所有图片var othis = $(this),//当前图片对象top = othis.offset().top - $(window).scrollTop();//计算图片top - 滚动条topif (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; }
转载于:https://www.cnblogs.com/engine/p/4236510.html
模仿米折网商品图片自动翻页效果相关推荐
- opengl png图片 qt_Qt翻页效果实现(四):OpenGL图像渲染
OpenGL贴图 OpenGL里面的图像渲染,是通过将图片映射成纹理,然后通过顶点坐标和对应的纹理坐标映射到物体表面. 顶点坐标 这里我们只有三个屏平面,在Qt翻页效果实现(二)文章中各点的坐标,在O ...
- WPF 把图片分割成两份自动翻页 WpfFlipPageControl:CtrlBook 书控件
原文:WPF 把图片分割成两份自动翻页 WpfFlipPageControl:CtrlBook 书控件 版权声明:本文为博主原创文章,需要转载尽管转载. https://blog.csdn.net/z ...
- android魅族轮播图,用angularjs模仿魅族官网的图片轮播功能
使用指令模仿魅族官网的图片轮播功能(angularjs中DOM操作都在指令中完成) html css .slider{ position: relative; width:900px; height: ...
- Py:利用pyautogui实现自动将pdf文件(需手动设定pdf总页数)自动翻页并截取另存为图片形式,或自动隔0.1秒自动截笔记本全屏保存到指定文件夹
Py:利用pyautogui实现自动将pdf文件(需手动设定pdf总页数)自动翻页并截取另存为图片形式,或自动隔0.1秒自动截笔记本全屏保存到指定文件夹 目录 实现步骤和结果 核心代码 实现步骤和结果 ...
- html滚动条自动翻页,10款无限滚动自动翻页jquery插件
无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,改变了一直以来只能通过点击下一页来翻页这种常规做法.无限滚动自 ...
- 设置PPT幻灯版自动翻页播放
有时候我在放映一些展示型的PPT时,我们希望能不用点击就自动的播放,自动的翻页,自动的循环. 现在小编就用PPT 2007来讲解下这个效果的实现. 首先得保证PPT中效果的切换不是鼠标点击的. 打开P ...
- 使用pyautogui 自动翻页、截屏!
使用pyautogui 自动翻页.截屏! 功能简单但是很有用!懂的都懂! #安装pyautogui,命令行输入python -m pip install -U pyautogui ,可以把其依赖的包给 ...
- python实现翻_python实现模拟按键,自动翻页看u17漫画
python实现模拟按键,自动翻页看u17漫画 发布于 2015-10-22 08:23:25 | 134 次阅读 | 评论: 0 | 来源: 网友投递 Python编程语言Python 是一种面向对 ...
- python实现二级页面带自动翻页功能,三级页面爬虫苏宁图书。
最近有在做小学期的项目,用scrapy实现爬取图书,下面是我实现的过程. 具体实现功能有:二级页面带自动翻页功能,三级页面的第一页爬取,大小类别的区分. 框架:scrapy 使用到chrome的插件: ...
最新文章
- Android WebView与ViewPager的滑动冲突分析
- Matter App提供了一个由BCH推动的长格式博客平
- mysql 连接url中useUnicode=truecharacterEncoding=UTF-8 的作用
- Leaflet中获取两个地理坐标点之间的距离
- 计算机视觉:图像分类定位(单一目标检测)python实现
- 解决查询时报的cannot be cast to com.credithc.enjoy.manager.OrderResp错误
- Jquery实现 全选反选
- 詹金斯搭建_与詹金斯一起连续交付Heroku
- windows 文件对话框
- 【2017年第2期】税务大数据分析的技术和典型应用
- java开发的格式与书写规范
- py3+urllib+bs4+反爬,20+行代码教你爬取豆瓣妹子图
- 光盘安装服务器找不到硬盘,安装系统找不到硬盘怎么办实测解决
- 解决管家婆7在SQL2008上安装不了问题
- 深度剖析Java集合之Stack
- 网页中留言板的制作案例
- 数字加千分位分隔符,加货币符号,数字转百分数
- html js左侧导航栏,js实现简单分页导航栏效果
- 计算机网络相关论文目录怎么弄,如何给你的标书、论文编页码和目录-论文页码设置...
- 日记500字初中计算机课,日记500字初中日常生活
热门文章
- 魔兽世界插件修改简单入手
- 首款一线大厂 QHD 萤幕手机快速体验, LG G3 动手玩(补上相机晴天拍摄效果) ...
- ubuntu安装nvidia显卡驱动后无法进入系统
- 数据统计与分析基础实验三:常规数学统计计算(R语言,还没写完)
- 云服务器为什么要设置防火墙?怎么设置防火墙?
- 小勇rust_基于领域和贝叶斯网络的P2P电子商务细粒度信任模型
- CTF常见密码编码合集
- python数据可视化——plt.plot()
- 【计算机视觉(CV)】基于图像分类网络VGG实现中草药识别(一)
- timestamps 字段按天去group by的写法