2. 程式人生 > >自己動手豐衣足食之圖片放大鏡

自己動手豐衣足食之圖片放大鏡

阿新 • • 發佈：2018-12-19
            (function() {                var oSmall = document.getElementById('small');                var oFloat = document.getElementById('float');                var oBig = document.getElementById('big');                var oImg = oBig.getElementsByTagName('img')[0];                oSmall.onmouseover = function
() {                    oBig.style.display = 'block';                    oFloat.style.display = 'block';                }                oSmall.onmouseout = function() {                    oBig.style.display = 'none';                    oFloat.style.display = 'none';                }                oSmall.onmousemove = function
(ev) {                    var oEvent = ev || event;                    /*****************/                    var zb = document.getElementById('zb');                    zb.innerHTML = "滑鼠指標clientX,clientY的座標:" + oEvent.clientX + "," + oEvent.clientY;                    zb.innerHTML = zb.innerHTML + ",</br>oSmall的offsetLeft,offsetTop:"
+ oSmall.offsetLeft + "," + oSmall.offsetTop;                    zb.innerHTML = zb.innerHTML + ",</br>oFloat的offsetWidth,offsetHeight:" + oFloat.offsetWidth + "," + oFloat.offsetHeight;                    /*****************/                    /*計算出滑塊的left,top*/                    var l = oEvent.clientX - oSmall.offsetLeft - oFloat.offsetWidth / 2;                    var t = oEvent.clientY - oSmall.offsetTop - oFloat.offsetHeight / 2;                    if (l < 0) {                        l = 0                    } else if (l > oSmall.offsetWidth - oFloat.offsetWidth) {                        l = oSmall.offsetWidth - oFloat.offsetWidth                    }                    if (t < 0) {                        t = 0                    } else if (t > oSmall.offsetHeight - oFloat.offsetWidth) {                        t = oSmall.offsetHeight - oFloat.offsetHeight;                    }                    oFloat.style.left = l + 'px';                    oFloat.style.top = t + 'px';                    zb.innerHTML = zb.innerHTML + "<br/>" + l + "," + t;                    //計算出相對百分比                    var percentX = l / (oSmall.offsetWidth - oFloat.offsetWidth);                    var percentY = t / (oSmall.offsetHeight - oFloat.offsetHeight);                    oImg.style.left = -percentX * (oBig.offsetWidth) + 'px';                    oImg.style.top = -percentY * (oBig.offsetHeight) + 'px';                }            })();       

相關推薦

自己動手豐衣足食之圖片放大鏡

            (function() {                var oSmall = document.getElementById('small');                var oFloat = document.getElementById('float');      

自己動手豐衣足食之移動端城市選擇外掛

下載地址：http://download.csdn.net/detail/cometwo/9436021 接著上一篇純js移動端日期選擇外掛，話說今天同事又來諮詢省市縣聯動的效果在移動端中如何實現，還是老樣子，百度上一搜，誒~又全是基於jquery、zepto的，更加可恨的

自己動手豐衣足食之Easyform表單驗證外掛&validate.js實時驗證

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ

PC版微信多開，不用軟件，自己動手豐衣足食。

tex ech tencent 文本 class ber 保存 後綴名 AR 關於PC版微信多開 找到微信的安裝路徑（包含 WeChat.exe 的文件夾）如: D:\Program Files\Tencent\WeChat 新建文本文檔，隨意命名，打開後粘貼如下代碼並保

自己動手豐衣足食-自己動手修改GBA ROM遊戲檔案

   好了，我們開始，首先我們來學習怎麼找或者說製造VisualBoyAdvance模擬器用的金手指，因為只有會找金手指程式碼了才能進行下一步的ROM修改。示例遊戲是《牧場物語：礦石鎮的夥伴》    現在的錢是500，選擇選單欄中的 修改→搜尋修改     按照圖片上的設定來，然後點 開始→搜尋    出來

PC版微信多開，不用軟體，自己動手豐衣足食。

關於PC版微信多開 找到微信的安裝路徑（包含 WeChat.exe 的資料夾）如: D:\Program Files\Tencent\WeChat新建文字文件，隨意命名，開啟後貼上如下程式碼並儲存：

自己動手，寫自己的lazyload，讓外掛涼快去——網站優化之圖片延時載入

最近一個專案裡，遇到一個這樣的需求：這是一個WEBAPP應用，應用所有的邏輯都聚焦在一個頁面內，客戶要求1.頁面載入速度要快，2頁面響應要快。3.這個頁面只能一屏，不能出現滾動條。因此這個頁面包含了大量的彈出層的操作。 由於這個頁面中，坑爹地包含了136張圖片，主要是很多L

自己動手編寫一個網絡圖片爬蟲

網絡 浪費 原理 get 應用 crawl 方法 網絡圖 理解 如今基本上我們的大部分時間都是浪費在瀏覽網頁上的，網頁有許多的媒體資源，其中最常見的是圖片。當我們瀏覽到比較好的網站的時候，看到比較好看的圖片總是會忍不住要下載。通常來說我們都是右鍵單擊圖標選擇圖片另存為，選擇

自己動手寫CPU之第九階段（2）——載入存儲指令說明2（lwl、lwr）

上傳 open 送書 運算 ada 讀者 str ast base 將陸續上傳新書《自己動手寫CPU》。今天是第38篇，我盡量每周四篇，可是近期已經非常久沒有實現這個目標了。一直都有事，不好意思哈。 開展曬書評送書活動，在q=%E4%BA%9A%E9%A9%A

[js高手之路]html5 canvas動畫教程 - 自己動手做一個類似windows的畫圖軟件

箭頭 erb 寬度 pow(x type row center shape htm 這個繪圖工具，我還沒有做完，不過已經實現了總架構，以及常見的簡易圖形繪制功能： 1，可以繪制直線，圓，矩形，正多邊形【已完成】 2，填充顏色和描邊顏色的選擇【已完成】 3，描邊和填充功

自己動手之k8s etcd ssl集群部署操作記錄

perm 啟動 type 可能性 而且 名稱 onf 配置 exit 參考文檔:https://github.com/opsnull/follow-me-install-kubernetes-cluster 1.下載和分發二進制安裝包 [root@k8s-master ku

java小白自己動手開發一個網站之域名的申請（第4回）

新手小白，大神們看到什麼問題，請多多指出   目錄   域名的申請 域名的申請   之前想做部落格，聽說朋友用的阿里雲的域名很便宜，於是就過去申請了一個 登入賬號就是淘寶的賬號 地址： https://wanwang.al

java小白自己動手開發一個網站之技術選型（第3回）

新手小白，大神們看到什麼問題，請多多指出 目錄     MyWeb技術選型 一、域名 二 、網站空間 三 、開發環境： 四、框架選擇 1.前段 2.後端 五、資料庫 六、伺服器 MyWeb技術選型 一、域名 來

java小白自己動手開發一個網站之搭建一個網站需要啥（第2回）

新手小白，大神們看到什麼問題，請多多指出 目錄 新手小白，大神們看到什麼問題，請多多指出 搭建網站的流程 註冊域名 購買空間 製作網站 搭建網站的流程 搭建網站有哪些流程 1＼註冊域名  2＼購買空間  3＼製作網站  &

java小白自己動手開發一個網站之立項（第1回）

新手小白，大神們看到什麼問題，請多多指出   MyWeb專案立項     修訂記錄表 修訂人 修訂版本 修訂描述 修訂時間 備註

java小白自己動手開發一個網站之建立專案及域名訪問（第5回）

新手小白，大神們看到什麼問題，請多多指出 目錄 一、建立專案  1.建立web專案,新增一個index.html頁面， 2.建立一個本地服務tomcat,並配置(檢驗tomcat是否成功，http://localhost:8080/） 3.後將專案新增進去，本地測試

Android自定義控制元件之區域性圖片放大鏡--BiggerView

零、前言： 本文的知識點一覽 1.自定義控制元件及自定義屬性的寫法，你也將對onMesure有更深的認識 2.關於bitmap的簡單處理，及canvas區域裁剪 3.本文會實現兩個自定義控制元件:FitImageView(圖片自適應)和BiggerView(放大鏡)，前者為後者作為鋪墊。 4.最後會

NET Core微服務之路：自己動手實現Rpc服務框架，基於DotEasy.Rpc服務框架的介紹和整合

本篇內容屬於非實用性（拿來即用）介紹，如對框架設計沒興趣的朋友，請略過。   快一個月沒有寫博文了，最近忙著兩件事;    一：閱讀劉墉先生的《說話的魅力》，以一種微妙的，你我大家都會經常遇見的事物，來建議說話的“藝術和魅力”，對於我們從事軟體開發、不太善於溝通

自己動手編寫一個Linux偵錯程式系列之4 ELF檔案格式與DWARF除錯格式

目錄 在上一節中，你已經聽說了DWARF除錯格式，它是程式的除錯資訊，是一種可以更好理解原始碼的方式，而不只是解析程式。今天我們將討論原始碼級除錯資訊的細節，以準備在本教程後面的部分中使用它。 系列索引 準備工作 斷點的設定 暫存器和記憶體 ELF檔案格式

前端優化之商品圖片放大鏡

優化原因 現在的電商商城專案解決的主要是購買商品的問題，那麼購買商品主要要看清楚商品表面外形的主要特徵和細節，如果圖片處理過小，或者細節過於模糊，就需要做一個商品高清圖片放大區域性的功能。 技術關鍵點 左側和上側距離，在一個水平位置和垂直位置中有我們可以挪