本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • jQuery仿淘宝商品详情页图片放大镜效果
    时间:2020-01-06 16:20 来源:开源之家 作者:开源之家测试提供 下载:129 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:3.85 MB
    • 运行环境:HTML
    • 下载次数:129 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    jQuery仿淘宝商品详情页图片放大镜效果

    特效描述:jQuery 仿淘宝商品详情页 图片放大镜效果,本人参考淘宝的商品详细页商品放大镜效果来制作,商品图片可以为各种矩形,放大规则同淘宝相似。css中的样式可进行各种样式修改。支持IE6及以上版本

    代码结构

    1. 引入CSS

    1
    <link href="css/common.css" rel="stylesheet" type="text/css" />

    2. 引入JS

    1
    2
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/common.js"></script>

    3. HTML代码

    <div style="width:600px; margin:0 auto;">
    <p>欢迎使用常用商品详情页商品放大镜效果,兼容IE6及以上版本</p>
    <p style="padding-bottom:50px;">图片标签上请务必注意width和height的值,这是必要的值,图片随意形状,随意大小,但必须填写该两个值,图片个数大于1就行,数量不固定</p>
    <!--页面必要代码,img标签上请务必带上图片真实尺寸px-->
    <div id="showbox">
      <img src="images/photos/img01.png" width="270" height="180" />
      <img src="images/photos/img02.png" width="320" height="735" />
      <img src="images/photos/img03.png" width="430" height="430" />
      <img src="images/photos/img04.png" width="290" height="290" />
      <img src="images/photos/img05.png" width="786" height="525" />
      <img src="images/photos/img06.png" width="300" height="300" />
      <img src="images/photos/img07.png" width="200" height="200" />
      <img src="images/photos/img08.png" width="810" height="582" />
      <img src="images/photos/img09.png" width="1920" height="900" />
    </div><!--展示图片盒子-->
    <div id="showsum"></div><!--展示图片里边-->
    <p class="showpage">
      <a href="javascript:void(0);" id="showlast"> < </a>
      <a href="javascript:void(0);" id="shownext"> > </a>
    </p>
    </div>

    jQuery仿淘宝商品详情页图片放大镜效果

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信