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实现图片三角形排列
Oct 17 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 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水印
2007/03/16 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python内存管理机制原理详解
2019/08/12 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
职工运动会邀请函
2014/01/19 职场文书
民生工程实施方案
2014/03/22 职场文书
护士自我推荐信范文
2015/03/24 职场文书
公司酒会主持词
2015/07/02 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android