電商網站常用放大鏡特效

阿新 • • 發佈：2019-03-30

mar nbsp 設置之前事件圖片 range div absolute

預覽效果：

類似於之前做過的裁剪預覽效果

技術分享圖片

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="X-UA-Compatible" content="ie=edge">
    <title>Document</ 
title>
    <script src="demo.js"></script>
    <style>
        #demo{
            display: block;
            width: 330px;
            height: 220px;
            margin: 50px;
            position: relative;
            border: 1px solid darkorange;
        }
        img 
{
            width: 330px;
            height: 220px;
        }
        #small-box{
            /* width: 330px; */
            position: relative;
            z-index: 1;
        }
        #float-box{
            display: none;
            position: absolute;
            background-color: #ffffcc 
;
            width: 200px;
            height: 125px;
            opacity: 0.5;
            cursor: move;
            border: 1px solid #ccc;
        }
        #big-box{
            display: none;
            position: absolute;
            top: 0;
            left: 400px;;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;
        }
        #big-box img{
            width: 600px;
            height: 400px;
            position: absolute;
            z-index: 5;
        }
        #mark{
            position: absolute;
            display: block;
            width: 330px;
            height: 220px;
            background-color: #fff;
            opacity: 0;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div id="small-box">
            <div id="mark"></div>
            <div id="float-box"></div>
            <img src="img1.jpg" alt="小圖">
        </div>
        <div id="big-box">
            <img src="img1.jpg" alt="大圖">
        </div>
    </div>
</body>
</html>

JS代碼：

window.onload = function(){
    var demo = document.getElementById("demo");
    var small_box = document.getElementById("small-box");
    var big_box = document.getElementById("big-box");
    var mark = document.getElementById("mark");
    var float_box = document.getElementById("float-box");
    var bigImg = big_box.getElementsByTagName("img")[0];
    console.log(bigImg);
    small_box.onmouseover = function(){
        big_box.style.display = "block";
        float_box.style.display = "block";
    }
    
    small_box.onmouseleave = function(){
        big_box.style.display = "none";
        float_box.style.display = "none";
    }

    small_box.onmousemove = function(ev){
        var _event  = ev || window.event;//兼容不同瀏覽器獲取事件對象的方式
        var left = _event.clientX - demo.offsetLeft - small_box.offsetLeft - (float_box.offsetWidth)/2;
        console.log(left);
        var top = _event.clientY - demo.offsetTop - small_box.offsetTop - (float_box.offsetTop)/2;
        if(left < 0){
            left = 0;
        }else if(left > (mark.offsetWidth - float_box.offsetWidth)){
            left = (mark.offsetWidth - float_box.offsetWidth);
            console.log("max");
        };
        if(top < 0){
            top = 0;
        }else if(top > (mark.offsetHeight - float_box.offsetHeight)){
            top = mark.offsetHeight - float_box.offsetHeight;
            console.log("maxerr");
        };
        //開始設置float_box的位置變化
        float_box.style.left = left + "px";
        float_box.style.top = top + "px";

        var percentX = left / (mark.offsetWidth - float_box.offsetWidth);
        var percentY = top / (mark.offsetHeight - float_box.offsetHeight);
        bigImg.style.left = - percentX *(bigImg.offsetWidth - big_box.offsetWidth) + "px" ;
        bigImg.style.top = - percentY *(bigImg.offsetHeight - big_box.offsetHeight) + "px";

    }
}

註意一個要點：

浮動框的寬/小盒子的寬 = 大盒子的寬/圖片的寬

電商網站常用放大鏡特效

mar nbsp 設置之前事件圖片 range div absolute 預覽效果：類似於之前做過的裁剪預覽效果 HTML、CSS代碼 <!DOCTYPE html> <html lang="en"> <head>

電商網站放大鏡效果

電商網站放大鏡效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

scroll()和scrollTop()方法——實現電商網站中的電梯導航

窗口 css樣式 ram 每一個最新 top index hid none 要想實現電商網站的電梯導航效果，首先需要了解以下知識點： jquery 事件 - scroll() 方法對元素滾動的次數進行計數，當用戶滾動指定的元素時，會發生 scroll 事件。scroll

MVC5+EF6開發電商網站

style win 6.2 1.4.1 tro model con 電商網站 comm 本文所使用的軟件及環境： Visual Studio Ultimate 2015; MVC5 + EF6 + .NET Framework 4.5 + LocalDB;Windows 7

如何打造一個小而精的電商網站架構？

升級它的應用開發 sql語句大綱網關響應文件服務器 upd 本文大綱： 1. 小型電商網站的架構 2. 日誌與監控系統的解決方案 3. 構建數據庫的主從架構 4. 基於共享存儲的圖片服務器架構 5. 移動M站建設 6. 系統容量預估 7. 緩存系統

電商網站項目Angular+Bootstrap+Node+Express+Mysql

中心 mage blog 更新 str tps image src 分享 1.登陸 2.註冊 3.主頁 4.購物車 5.管理中心 6.文件上傳代碼： https://github.com/Carol0311/min_Shop.git 後期會持續進行功能更新以及

大型網站架構系列：電商網站架構案例(2)

嚴重團隊 nbsp 很好劃分電商網站架構圖用戶可能電網網站架構案例系列的第二篇文章。主要講解網站架構分析，網站架構優化，業務拆分，應用集群架構，多級緩存，分布式Session。五、網站架構分析根據以上預估，有幾個問題：需要部署大量的服務器，高峰期計算，

php技術棧--電商網站

php 技術棧版本號phpnginxRedismysql mysql mgr mysql cluster HAproxyprofixelasticsearch ubuntu 本文出自 “運維自動化” 博客，請務必保留此出處http://shower.blog.51c

實現基於LVS負載均衡集群的電商網站架構

nat lvs dr 實現基於LVS負載均衡集群的電商網站架構具體如何實現電商網站請參看博客：http://13150617.blog.51cto.com/13140617/1978954實驗一、實現基於NAT模式的LVS負載均衡：準備三臺主機：一臺Director（橋接網卡、僅主機網卡）：

基於LNMP的簡單電商網站架構

linux 運維一：實驗環境centos 7 實驗機chrome 瀏覽器二：實驗步驟※註意事項實驗前，查看80端口是否被httpd服務占用，如打開，則關閉httpd服務，確保80端口未開啟1.安裝必要軟件yum install mariadb mariadb-server php-fpm php p

企業實戰-實現基於LVS負載均衡集群的電商網站架構

企業實戰 lvs lnmp 實現LVS-DR工作模式：環境準備：一臺centos系統做DR、兩臺實現過基於LNMP的電子商務網站機器名稱IP配置服務角色備註lvs-serverVIP：172.17.252.110DIP：172.17.250.223負載均衡器開啟路由功能（VIP橋接）rs01RIP

電商網站中添加商品到購物車功能模塊2017.12.8

全部入參 es2017 nal 購物依次 response .net 臺電前言：電商網站中添加商品到購物車功能模塊實現：根據前一篇博客的介紹，我們看到淘寶網站為了保證購物車數據的同步，直接是強制用戶必須登錄才可以將商品加入購物車。而京東網站是用戶在未登錄的狀態下也

電商網站商品模型之商品詳情頁設計方案

查詢 amp 多對一關系 int cor http 添加 com 托盤如下設計方案參考淘寶和華為商城 SKU SPU的關系 SPU = Standard Product Unit （標準產品單位） SPU是商品信息聚合的最小單位，是一組可復用、易檢索的標準化信息的集合，該

選擇Shopify開店還是自建電商網站平臺？

無論是我自己，還是接觸到的客戶，提到要從業網絡電商業務，首先想到的是擁有自己的電商網站平臺，比如用Opencart、Magento、ecShop等開源程序搭建屬於公司、自營品牌的網站。如果我們有這類的技術能力，能夠擁有這樣的技術和實力，搭建屬於自己的產品平臺固然是好事，因為在運營推廣等元素上，肯定比較靈

ES6+ 開發電商網站的賬號體系 JS SDK

enc pos python操作 mon strong 外賣 ava 搜索高手詳情請咨詢 QQ 709639943 01、ES6+ 開發電商網站的賬號體系 JS SDK 02、Python3 全網最熱的Python3入門+進階比自學更快上手實際開發 03、P

年度十佳電商網站設計賞析

伴隨著近年來電子商務的迅猛發展，世界範圍內的線上購物持續增加。以剛過去的黑色星期五為例，用戶通過網絡渠道購買商品的銷售額達到了50.3億美元，相較於2016年同期增長了16.9%，創下了美國電商歷史的新紀錄。在電商及網購快速發展的當今，走心的視覺設計已是應對不斷增長的用戶需求的必需品，也是

關於電商網站購物車功能如何與登錄賬號相關聯的一點想法

客戶實體類數據庫後來購物賬號登錄就是解決過程最近在試著做電商網站，自然也需要涉及到實現購物車的功能。然後就想到去用cookie來完成購物車的功能。實現過程是新建一個cookie，把購物車實體類的list放進去，每次給購物車新增商品和刪除商品的時候就new

電商網站第一天

電商網站服務器網站 -- tomcat 服務功能集群電商 4. 電商網站的架構演變 4.1 1.傳統項目的架構---三層 2.一個tomcat理論上只能支持500個並發, 實際上能支持300已經算不錯了. 硬件解決並發在兩臺服務器上部署相同的代碼, 如何解決se

42.PHP--電商網站的詢價插件

index.php oob keep filter firefox mouseup ali pos int windows下使用php自帶的mail函數實現簡單的郵件發送實例（QQ親試成功）功能實現：通過中間郵箱把客戶的需求和產品信息全部發送到公司的業務員郵箱環境及工具

電商網站開發記錄(二) mybatis三劍客的引入

model car pat 獨立 mce image optional org odin 引入mybatis三劍客 1.mybatis-generator,在resources下新建generatorConfig.xml,配置文件詳細信息如下 <?xml versio

電商網站常用放大鏡特效

相關推薦