Html5插件教程之添加浏览器放大镜效果的商品橱窗


Posted in HTML / CSS onJanuary 07, 2016

KeyMob移动端广告平台为应用开发者和广告主提供应用交叉推广、手机广告优化等一站式移动营销解决方案,使应用开发者和广告主获得价值的最大化。
一、使用方法

复制代码
代码如下:

<link rel="stylesheet" href="css/smoothproducts.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>

二、Html结构

复制代码
代码如下:

<div class="sp-wrap">
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
</div>

你还可以通过使用sp-loading class添加一个图片加载时的loading指示器容器,这个容器会在图片加载完成之后消失。

复制代码
代码如下:

<div class="sp-loading"><img src="images/sp-loading.gif" alt="">
LOADING IMAGES</div>
<div class="sp-wrap">
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
</div>

如果需要在页面加载时显示指定的商品缩略图,而不是第一张缩略图,可以在想要指定的图片的超链接上指定sp-default class。

复制代码
代码如下:

<div class="sp-wrap">
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg" class="sp-default"><img src="images/2_tb.jpg" alt=""></a>
</div>

三、初始化插件

复制代码
代码如下:

<script type="text/javascript">
$(window).load( function() {
$('.sp-wrap').smoothproducts();
});
</script>

KeyMob移动端广告平台为应用开发者和广告主提供应用交叉推广、手机广告优化等一站式移动营销解决方案,使应用开发者和广告主获得价值的最大化。

HTML / CSS 相关文章推荐
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 #HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 #HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 #HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 #HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 #HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 #HTML / CSS
Html5大文件断点续传实现方法
Dec 05 #HTML / CSS
You might like
福利彩票幸运号码自动生成器
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
python实现simhash算法实例
2014/04/25 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
详解python中docx库的安装过程
2019/11/08 Python
python中的逆序遍历实例
2019/12/25 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
什么是数组名
2012/05/10 面试题
网页美工求职信
2014/02/15 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
教师节大会主持词
2015/07/06 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js