HTML CSS寫商品詳情放大鏡效果

阿新 • • 發佈：2019-02-13

先上效果圖：
這裡寫圖片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin: 0px;padding: 0px;}
            #small{width: 170px;height: 170px;background:url(img/2.jpg);border: 1px solid#000000;margin 
:50px;float: left;position: relative;}
            #big{width: 170px;height: 170px;background:url(img/1.jpg);border: 1px solid#000000;float:left;margin-top: 50px;display: none;}
            #search{width: 72px;height: 72px;background: pink;opacity: 0.5;display: none;position: absolute;position: absolute;}
         
</style>
    </head>
    <body>
        <!--顯示衣服的DIV-->
        <div id="small">
            <!--顯示需要檢視的放大區域-->
            <div id="search"></div>
        </div>
        <!--顯示放大區域-->
        <div id="big"></div>
    </body>
    <script 
 type="text/javascript">
        var small=document.getElementById("small");
        var big=document.getElementById("big");
        var search=document.getElementById("search");
        //滑鼠移入small時顯示search和big
        small.onmouseover=function(){
            big.style.display="block";
            search.style.display="block";
        }
        //滑鼠移出small時隱藏search和big
        small.onmouseout=function(){
            big.style.display="none";
            search.style.display="none";
        }
        small.onmousemove=function(){
            var evt=event||arguments[0];
            //獲取當前滑鼠座標
            var x=evt.clientX-small.offsetLeft-search.offsetWidth/2;
            var y=evt.clientY-small.offsetTop-search.offsetHeight/2;
            //判斷當前位置search顯示框不能移出small框
            if(x<0){
                search.style.left=0+"px";
            }else if(x>=small.offsetWidth-search.offsetWidth){
                search.style.left=small.offsetWidth-search.offsetWidth+"px";
            }else{
                search.style.left=x+"px";
            }
            if(y<0){
                search.style.top=0+"px";
            }else if(y>=small.offsetHeight-search.offsetHeight){
                search.style.top=small.offsetHeight-search.offsetHeight+"px";
            }else{
                search.style.top=y+"px";
            }
            //計算放大比例，這個比例是大圖片和小圖片的比例
            var w=400/170;
            //顯示放大區域
            big.style.backgroundPosition=(-search.offsetLeft)*w+"px"+" "+(-search.offsetTop)*w+"px";
        }
    </script>
</html>

原圖：
這裡寫圖片描述

這裡寫圖片描述

HTML CSS寫商品詳情放大鏡效果

先上效果圖： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

html+css寫出類似word目錄樣式的內容

設置 posit 背景色 das pla borde html 背景 z-index word目錄的格式裏這種很常見，要用html+css寫出來剛開始還有點懵。左右兩邊都是內容撐開寬度，中間內容的寬度也不是確定的，也是隨著左右兩邊的內容動態變化的。最終解決思路是

html,css,js,反彈的js效果

var The left mage posit charset ima html cli 實現效果：實現代碼如下： <!DOCTYPE html><html> <head> <meta charset="UTF-8">

用html+css寫一下個人簡歷

今天練習一下頁面佈局，就用自己的個人簡歷來練手。下面是html部分： 1 <body> 2 <div class="content"> 3 <div class="head"> 4 <h1>

Android開發仿淘寶商品詳情瀏覽效果兩步曲

效果圖：第一步佈局檔案： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr

HTML-CSS寫抽屜網的置頂區域

1.在pycharm的已有工程中新建一個html檔案。 2.在<body></body>標籤內部寫入要內容： <div class='head-box' > <div class="content-box"> &l

html+css+js 簡易展開收起效果

用html+css+js做一個簡易的文字展開收起效果。如圖：（部分結構標籤可能不是最佳選擇，此次僅以實現展開收起效果為例子）以HBuilder編輯器選項卡中“查詢”選項為例。設定“查詢”為連結，

HTML/CSS寫的簡單的註冊頁面

效果如圖：程式碼如下：(其實CSS程式碼可以簡化很多)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>賬戶註冊</

HTML+Css寫一個簡單的選項卡

下面是程式碼實現之後的效果：程式碼如下： <!DOCTYPE html> <html> <head> <title>選項卡製作</title> <style type="text/css">

商品圖片放大鏡效果

在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現滑鼠懸停在商品大圖上時，在商品大圖右側出現放大鏡效果並根據滑鼠的位置來改變右側大圖的顯示內容，放大鏡中的內容和滑鼠懸停位置的內容相同。該特效的實現效果圖為：對商品大圖新增滑鼠監聽事件，首先監聽滑鼠的進入事件

html/css移動介面側滑效果

$(document).ready(function(){ //側滑按鈕點選事件 $(".mybtn").click(function(){ //頁面整體側滑

HTML+CSS 實現環形比例圖效果

HMTL程式碼 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <t

HTML+CSS+JS實現輪播效果

1.lunbo.html程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大輪播</tit

前端 html+css+javascript 選項卡切換效果

效果圖： html程式碼： <div id="divPage" style="width:800px;height:750px;padding:10px;background:#fafafa;"> <p style="margin-b

HTML + CSS寫輪播圖

HTML+CSS寫輪播圖利用CSS3的新屬性，可以實現輪播，主要是利用CSS3的動畫的三要素：（1）需要執行那個動畫 animation-name:動畫名 animation-name:lunbo; （2）需要建立一個名稱

Android之仿淘寶商品詳情瀏覽效果

-----------------轉載請註明出處：http://blog.csdn.net/android_cll 一：先來幾張效果圖，沒有弄gif動畫，也就是商品詳情滑動到底部繼續上滑檢視圖文詳情、二：實現步驟： 1.自定義一個父容器ScrollVi

html/css 寫出類似遙控器方向鍵，上下左右鍵

最近要做一個攝像頭互動的功能，其中有一個功能是通過後臺管理呼叫海康攝像頭sdk去控制攝像頭上下左右搖動。整理了一個html和css畫出四個方向鍵UI的程式碼。效果圖和程式碼如下：（歡迎交流）效果圖：ht

純HTML+CSS寫出一顆會飄動的樹，有沒有驚豔到你呢？

本文轉載於:猿2048網站純HTML+CSS寫出一顆會飄動的樹，有沒有驚豔到你呢？前言使用HTML+CSS能寫出什麼驚人的

照片墻效果---->能成功運行。js+html+css

照片 function parent <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>My照片墻</title> <style ty

讓你的eclipse實現寫JAVA代碼，HTML,CSS,JAVASCRIPT代碼提示

css ref win imp center asc java代碼 char 保存文件　　1.打開eclipse→Windows→Preferences→Java→Editor→Content Assist 　　改動Auto Activation triggers f

HTML CSS寫商品詳情放大鏡效果

相關推薦