零基础学做网站培训介绍

当前位置:

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

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

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

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

方法/步骤

  1. 下载图片放大预览功能插件JS文件,下载链接: https://pan.baidu.com/s/1stJRm02Gz5xgag1NzlIa4g 提取码: 9iny;
  2. 在代码的头部引入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>
  3. 在样式代码里,放在以下的样式代码,用于控制放大镜功能的样式;
    
    
    <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>
  4. 在显示放大镜功能的位置,放上以下的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>
  5. 这样网站商品图片放大预览功能就制作好了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 什么是团购网站所谓团购网站就是团购的网络组织平台,就是互不认识的消费者,借助互联网的“网聚人的力量”来聚集资金,加大与商家的谈判能力,以求得
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 以下是学做网站论坛关于《Dreamweaver 如何添加网页图片热区链接》视频教程。
  • 逛过淘宝的人都知道,淘宝有一个宝贝图片放大镜功能。光标指向小图片时,可以查看大图片细节。效果如下图:如何在自己做网站时,在自己的网站
  • 图片放大镜js代码 图文教程 (15151 次浏览)
    我们在很多商城网站都看到有图片放大镜功能,光标指向一个小图片时,可以显示出一个大图片。效果如下图:这种图片放大镜功能,可以通过JS来实
  • 在之前的建站教程中,我们讲了如何制作淘宝图片放大镜功能,并给了相应的代码。这是一个固定的HTML代码,很多学习建网站的学员不懂怎么把它与Wordpres
  • 插件介绍WordPress主题演示/预览插件Wave Your Theme 由国内资深插件开发者 QiQiBoY 制作的一款wordpress插件。WordPress主题演示/预览插件可用
  • 我自己制作了一个wordpress网站,从网上下载了一个wordpress企业站模板,它的效果图挺漂亮的,可是我安装之后,网站的界面和预览的不一样,这该怎
  • 微信小程序工具如何进行真机预览?我们开发小程序过程中,如果想用自己的手机预览一下自己开发的小程序在真机上的运行情况,可以使用开发工具的真机预
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手工
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想