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制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 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
php session 错误
2009/05/21 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
详解Django中Request对象的相关用法
2015/07/17 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
python多线程和多进程关系详解
2020/12/14 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
供用电专业求职信
2014/07/07 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
放牛班的春天观后感
2015/06/01 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
Go语言基础map用法及示例详解
2021/11/17 Golang
python套接字socket通信
2022/04/01 Python
Python OpenCV实现图形检测示例详解
2022/04/08 Python