善恶资源网专注优秀技术教程分享网-傅汉松!

网站商品图片放大预览功能制作方法

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是网站商品图片放大预览功能制作方法

傅汉松

很多企业网站或者商城网站都有这样的功能,图片展示切换效果上面有图片放大预览功能。如下图:

在自己做网站时,怎么制作这样的网站商品图片放大预览功能呢,下面学做网站论坛介绍一下制作方法。

方法/步骤

下载图片放大预览功能插件JS文件,下载链接: https://pan.baidu.com/s/1stJRm02Gz5xgag1NzlIa4g 提取码: 9iny;

在代码的头部引入JQUERY和插件JS文件;(注意修改路径)

<script src="js/jquery.js"></script>
<script src="js/mag.js"></script>
<script>
$(function(){
/*
show //正常状态的框
bigshow // 放大的框的盒子
smallshow //缩小版的框
mask //放大的区域(黑色遮罩)
bigitem //放大的框
*/
var obj = new mag('.show', '.bigshow','.smallshow','.mask','.bigitem');
obj.init();
});
</script>

在样式代码里,放在以下的样式代码,用于控制放大镜功能的样式;

<style>
.bg{width:920px;height: 540px;margin:0 auto;padding:20px;border:1px solid #E8E8E8;overflow: hidden;min-width: 900px;box-sizing: border-box;background: #fff;}
.bg_left{width: 430px;height:auto;float: left}
.bg_right{float: left;z-index:999;position:relative}
.show{width: 430px;height: 430px;margin-bottom: 10px;position: relative;border:1px solid #E8E8E8;cursor:move}
.show img{width: 430px;height: 430px;}
.mask{width: 215px;height: 215px;background: #000;filter: Alpha(opacity=50);opacity:0.5;position: absolute;top: 0;left: 0;display: none;}
.bigshow{width: 430px;height: 430px;overflow: hidden;margin-left: 10px;display: none;border:1px solid #E8E8E8;}
.bigshow img{width: 860px;height: 860px;margin-right: 10px;}
.smallshow{width: 100%;height: 70px;position: relative}
.smallshow img{width:100%;border:1px solid #e8e8e8;box-sizing: border-box;transition: all 0.5s}
.smallshow>.middle_box{margin-left: 30px;margin-right: 30px;width:370px;overflow: hidden;height: 70px;}
.smallshow .middle{overflow: hidden;transition: all 0.5s;height: 70px;}
.smallshow .middle>li{width: 64px;height: 64px;float: left;cursor:pointer;padding:0 5px;}
.smallshow>p{position: absolute;top:50%;width: 22px;height: 32px;margin-top: -16px;}
.smallshow>.prev{left: 0;background: url(img/hover-prev.png) no-repeat;transition: all 0.5s}
.smallshow>.next{right: 0;background: url(img/hover-next.png) no-repeat;transition: all 0.5s}
.smallshow>.prev.prevnone{left: 0;background: url(img/prev.png) no-repeat;cursor: not-allowed}
.smallshow>.next.nextnone{right: 0;background: url(img/next.png) no-repeat;cursor: not-allowed}
</style>

在显示放大镜功能的位置,放上以下的HTML代码,用于显示放在镜预览功能框;(注意修改图片路径)

<div class="bg">
<div class="bg_left">
<div class="show">
<img src="Document_files/img1.png" alt="">
<div class="mask" style="display: none; left: 215.4px; top: 95.7px;"></div>
</div>
<div class="smallshow">
<p class="prev prevnone"></p>
<div class="middle_box">
<ul class="middle" style="width: 592px;">
<li><img src="Document_files/img1.png" alt="" style="border: 2px solid rgb(255, 68, 0);"></li>
<li><img src="Document_files/img2.png" alt=""></li>
<li><img src="Document_files/img3.png" alt=""></li>
<li><img src="Document_files/img4.png" alt=""></li>
<li><img src="Document_files/img5.png" alt=""></li>
<li><img src="Document_files/img6.png" alt=""></li>
<li><img src="Document_files/img7.png" alt=""></li>
<li><img src="Document_files/img8.png" alt=""></li>
</ul>
</div>
<p class="next "></p>
</div>
</div>
<div class="bg_right">
<div class="bigshow" style="display: none;">
<div class="bigitem" style="width: 861.601px;">
<img src="Document_files/img1.png" alt="" style="margin-left: -431.201px; margin-top: -191.578px;">
</div>
</div>
</div>
</div>

这样网站商品图片放大预览功能就制作好了。


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 网站商品图片放大预览功能制作方法
很多企业网站或者商城网站都有这样的功能,图片展示切换效果上面有图片放大预览功能。如下图:在自己做网站时,怎么制作这样的网站商品图片放大预览功能呢,下面学做网站论...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    89.90ms