网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

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

复制代码代码如下:
<link rel="stylesheet" href="css/smoothproducts.css">
<script type="text/javascript" src="/UploadFiles/2021-03-30/jquery.min.js"><script type="text/javascript" src="/UploadFiles/2021-03-30/smoothproducts.min.js">

二、Html结构

复制代码代码如下:
<div class="sp-wrap">
<a href="images/1.jpg"><img src="/UploadFiles/2021-03-30/1_tb.jpg"><a href="images/2.jpg"><img src="/UploadFiles/2021-03-30/2_tb.jpg"></div>

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

复制代码代码如下:
<div class="sp-loading"><img src="/UploadFiles/2021-03-30/sp-loading.gif">LOADING IMAGES</div>
<div class="sp-wrap">
<a href="images/1.jpg"><img src="/UploadFiles/2021-03-30/1_tb.jpg"><a href="images/2.jpg"><img src="/UploadFiles/2021-03-30/2_tb.jpg"></div>

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

复制代码代码如下:
<div class="sp-wrap">
<a href="images/1.jpg"><img src="/UploadFiles/2021-03-30/1_tb.jpg"><a href="images/2.jpg" class="sp-default"><img src="/UploadFiles/2021-03-30/2_tb.jpg"></div>

三、初始化插件

复制代码代码如下:
<script type="text/javascript">
$(window).load( function() {
$('.sp-wrap').smoothproducts();
});
</script>

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

上一篇:基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
下一篇:移动端html5 meta标签的神奇功效
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap