电商网站jQuery放大镜代码

分享一款电商网站jQuery放大镜代码。这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <center>
        <h1>
            Basic Zoom Example</h1>
        <img id="zoom_01" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" />
        <br />
        <br />
        <br />
        <h1>
            Inner Zoom</h1>
        <img id="zoom_02" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" />
        <br />
        <br />
        <br />
        <h1>
            Lens Zoom</h1>
        <img id="zoom_03" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" />
        <br />
        <br />
        <br />
        <h1>
            Fade in / Fade Out Settings</h1>
        <img id="zoom_04" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" />
        <br />
        <br />
        <br />
        <h1>
            Easing</h1>
        <img id="zoom_05" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" />
        <br />
        <br />
        <br />
        <h1>
            Mousewheel Zoom</h1>
        <img id="zoom_06" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg" />
    </center>
    <script>
        $(‘#zoom_01‘).elevateZoom({});

        $(‘#zoom_02‘).elevateZoom({
            zoomType: "inner",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
        });

        $("#zoom_03").elevateZoom({
            zoomType: "lens",
            lensShape: "round",
            lensSize: 200
        });

        $("#zoom_04").elevateZoom({
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 500,
            lensFadeIn: 500,
            lensFadeOut: 500
        });

        $("#zoom_05").elevateZoom({
            easing: true
        });

        $("#zoom_06").elevateZoom({
            scrollZoom: true
        });
    </script>

via:http://www.w2bc.com/Article/39904

时间: 2024-10-13 11:43:44

电商网站jQuery放大镜代码的相关文章

电商网站常用放大镜特效

预览效果: 类似于之前做过的裁剪预览效果 HTML.CSS代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv

电商网站的放大镜功能

首先是样式部分,分别定义一大一小两个盒子,用来盛放大图片和小图片. <style > *{ padding: 0; margin: 0; } #demo { display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #small_box { position: absolute; z-index: 1; } #mark { position:

[ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 一 ) - 传统下拉菜单

/** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.5 */ 说明:分析其他网站的图片较多,可以在目录跳过直接看本文 demo . 目录: 其他网站分析 亚马逊 淘宝 京东 当当 本文案例 demo1 demo2 [ 后面的博文再写 ] demo3 [ 后面的博文再写 ] 惯例,先看看他山之石,选择了四家比较大的电商网站:亚马逊.淘宝.京东.当当,看看它们的地址联动菜单是怎么做的. 1. 亚马逊[返回目录][下一节:淘宝] 图1 默认界面 说

利用jquery实现电商网站常用特效之:五星评分

这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引入jQuery 例子中我使用的是在线jQuery: <script src="/jquery/1.10.0/jquery.min.js"></script> 2.jQuery方法说明: prevAll:如果给定一个表示 DOM 元素集合的 jQuery 对象,.pr

微软ASP.NET 电商网站开发实战 MVC6 +HTML5 +WCF+WebAPI+NoSQL+mongoDB+Redis+Core视频 代码 面试题

<微软ASP.NET 电商网站开发实战 MVC6 +HTML5 +WCF+WebAPI+NoSQL+mongoDB+Redis+Core 视频 代码 面试题 >下载网盘:https://yunpan.cn/cP7SNIjgJYYjA  访问密码 7fc6 微软特邀讲师 徐雷FrankXuLei 2016 授课 更新:.NET Core 1.0高并发框架+面试题更新:高性能缓存 Redis.NoSQL面试题 安装,增删改查 RedisHelper帮助类 购物车 会话服务器更新:REST WebA

电商网站常用的楼层导航效果

很多电商网站都使用楼层导航效果来布局,如京东,唯品会等大型网站.那楼层导航效果怎么写了,其实很简单,主要用到鼠标滚动事件和高度的应用.现在我们就来用jquery来写以下.代码是直接copy过来的,因为注释比较多所以看起来有点乱.感兴趣的同学可以下载下面的源码来学习. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>楼层导航3</title> &

电商总结(八)如何打造一个小而精的电商网站架构

前面写过一些电商网站相关的文章,这几天有时间,就把之前写得网站架构相关的文章,总结整理一下.把以前的一些内容就连贯起来,这样也能系统的知道,一个最小的电商平台是怎么一步步搭建起来的.对以前的文章感兴趣的朋友可以看这个,http://www.cnblogs.com/zhangweizhong/category/879056.html 本文大纲: 1. 小型电商网站的架构 2. 日志与监控系统的解决方案 3. 构建数据库的主从架构 4. 基于共享存储的图片服务器架构 5. 移动M站建设 6. 系统容

DDD设计一个电商网站

DDD设计一个电商网站(十一)-- 最后的准备  阅读目录 前言 准备 实现 结语 一.前言 最近实在太忙,上周停更了一周.按流程一步一步走到现在,到达了整个下单流程的最后一公里--结算页的处理.从整个流程来看,这里需要用户填写的信息是最多的,那么在后端的设计中如何考虑到业务边界的划分,和相互之间的交互复杂度,又是我们需要考虑的地方.总体来说本篇讲述的内容在前几篇都有涉及,所以这次一次性处理的业务比较多,已经比较熟练的看官可以跳过本篇. 二.准备 主流的电商设计中结算页包含以下5个概念:选择收货

电商网站滑动门特效

今天在慕课网学习了JavaScript滑动门特效,这个特效在电商网站上比较常见,难度适中,要对JavaScript和DOM比较熟悉. 一.实现HTML + CSS结构 首先编写HTML代码 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sliding doors</title> 6 <link rel="s