JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用 jQuery 實現類似 Apple 的 Retina 效果

長期以來,Apple 一直在營銷中採用制勝策略——打造設計精良的產品,擁有專門的粉絲群,並在每次產品發布之前進行宣傳。

他們最新版本的 iPhone 也是如此。但我發現有趣的是他們創造的術語——“Retina display”和伴隨它的宣傳圖片。

讓我想知道的是,是否可以僅使用 jQuery 和 CSS 將這個靜態圖像變成功能齊全的“視網膜效果”。這正是我們今天正在做的事情。因此,從上面的按鈕中獲取演示文件並繼續閱讀。

第 1 步 - XHMTL

效果的標記非常簡單。你可以看到我們只有一些 div 和一張圖片。

demo.html

<div id="main">

    <div id="iphone">
        <div id="webpage">
            <img src="img/webpage.png" width="499" height="283" alt="Web Page" />
            <div id="retina"></div>
        </div>
    </div>

</div>

#iphone div 顯示 iphone 框架。裡面是 #webpage 帶有網頁截圖的 div。屏幕截圖實際上顯示為原始大小的一半,因為我們對小版本(在 iPhone 中顯示)和大版本使用相同的圖像,這顯示在圓形工具提示中。

最後是retina div,它是用CSS3四捨五入的,當它用鼠標移動時,它會顯示網頁截圖的大版本作為它的背景。

第 2 步 - CSS

轉到本教程的 CSS 部分。我們將為 iphone 設置樣式 , 網頁視網膜 divs,所以我們讓超棒的效果成為可能。

styles.css

#iphone{
    /* The iphone frame div */
    width:750px;
    height:400px;
    background:url('img/iphone_4G.png') no-repeat center center;
}

#webpage{
    /* Contains the webpage screenshot */
    width:499px;
    height:283px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-141px 0 0 -249px;
}

#retina{
    /* The Retina effect */
    background:url('img/webpage.png') no-repeat center center white;
    border:2px solid white;

    /* Positioned absolutely, so we can move it around */
    position:absolute;
    height:180px;
    width:180px;

    /* Hidden by default */
    display:none;

    /* A blank cursor, notice the default fallback */
    cursor:url('img/blank.cur'),default;

    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
    -webkit-box-shadow:0 0 5px #777;
    box-shadow:0 0 5px #777, 0 0 10px #aaa inset;

    /* CSS3 rounded corners */
    -moz-border-radius:90px;
    -webkit-border-radius:90px;
    border-radius:90px;
}

#retina.chrome{
    /* A special chrome version of the cursor */
    cursor:url('img/blank_google_chrome.cur'),default;
}

#main{
    /* The main div */
    margin:40px auto;
    position:relative;
    width:750px;
}

通過在網頁div上指定絕對定位,我們可以應用垂直和水平居中技術,有效地將網頁截圖放在iphone框架的中間。

視網膜 div 也被分配了一個絕對定位,因此可以在教程的 jQuery 部分中通過指定一個頂部和左側偏移量來移動它。這個 div 也有網頁截圖作為它的背景(在它的原始大小)。隨著 div 的移動偏移背景會產生一種錯覺,即它放大了它下面的小屏幕截圖。

視網膜 div 還應用了一個邊框半徑,其值正好是其寬度的一半,這將其變成了一個完美的圓形(至少在支持邊框半徑 CSS3 屬性的瀏覽器中 - Chrome、Safari、Opera 和 Firefox)。

最後我們通過提供一個空白光標文件來隱藏鼠標指針(谷歌瀏覽器無法渲染完全空白的光標,所以我們為其提供了一個特殊的 1px 白色光標——至少總比沒有好)。 Opera 瀏覽器完全忽略了自定義光標並且沒有變通方法,因此使用此瀏覽器的用戶可能無法享受完整的體驗。

第 3 步 - jQuery

如果你還記得的話,幾個月前我們在 Tutorialzine 上做了一個教程,其中我們使用 jQuery 創建了一個照片效果。這次我們使用了類似的技術來製作“視網膜效應”,就像在 Apple 的網站上看到的那樣。

既然我們已經有了所有的樣式,那就是在 jQuery 庫的幫助下進行一些 JavaScript 編碼的問題。

script.js

$(document).ready(function(){

    /* This code is executed on the document ready event */

    var left    = 0,
        top     = 0,
        sizes   = { retina: { width:190, height:190 },
                webpage:{ width:500, height:283 } },
        webpage = $('#webpage'),
        offset  = { left: webpage.offset().left, top: webpage.offset().top },
        retina  = $('#retina');

    if(navigator.userAgent.indexOf('Chrome')!=-1)
    {
        /*  Applying a special chrome curosor,
            as it fails to render completely blank curosrs. */

        retina.addClass('chrome');
    }

    webpage.mousemove(function(e){

        left = (e.pageX-offset.left);
        top = (e.pageY-offset.top);

        if(retina.is(':not(:animated):hidden')){
            /* Fixes a bug where the retina div is not shown */
            webpage.trigger('mouseenter');
        }

        if(left<0 || top<0 || left > sizes.webpage.width ||
            top > sizes.webpage.height)
        {
            /*  If we are out of the bondaries of the
                webpage screenshot, hide the retina div */

            if(!retina.is(':animated')){
                webpage.trigger('mouseleave');
            }
            return false;
        }

        /*  Moving the retina div with the mouse
            (and scrolling the background) */

        retina.css({
            left                : left - sizes.retina.width/2,
            top                 : top - sizes.retina.height/2,
            backgroundPosition  : '-'+(1.6*left)+'px -'+(1.35*top)+'px'
        });

    }).mouseleave(function(){
        retina.stop(true,true).fadeOut('fast');
    }).mouseenter(function(){
        retina.stop(true,true).fadeIn('fast');
    });
});

在 mousemove 函數中,鼠標的當前坐標被傳遞為 e.pageXe.pageY ,但它們相對於文檔是絕對的。減去網站 div 的位置偏移,我們最終得到了鼠標的相對坐標,這些坐標稍後用於定位視網膜 div。

這與我們在教程的 CSS 部分中設置的空白光標相結合,在純 JavaScript 和 CSS 中創建了視網膜效果。

結論

隨著最近關於 Flash / HTML5 的爭論愈演愈烈,人們開始尋找方法來實現與 Flash 提供的相同級別的功能,而不依賴於外部插件。這對於簡單的交互是可能的,但我們仍然必須確保解決方案是跨瀏覽器兼容的,這有時是相當不可能的(在這裡想想 IE)。

希望今天我們做出的東西可以輕鬆地與等效的 Flash 解決方案相媲美。

你怎麼看?您將如何改善這種效果?


Tutorial JavaScript 教程
  1. 使用 React 中的下拉菜單從 API 過濾數據

  2. 為什麼開發人員必須開始寫博客以及如何開始?

  3. 我如何在 Node.js 中製作 Instagram 內容獲取 API

  4. 在 JavaScript 中解構對象和數組

  5. 項目 2:JavaScript 時鐘

  6. span 內部按鈕,在 Firefox 中不可點擊

  7. TypeScript 中的 JSX 片段語法

  1. 使用 Express、React 和 GraphQL 構建簡單的 Web 應用程序

  2. 帶有 VML 的 IE 畫布

  3. MERN - 旅遊套餐預訂

  4. 給 Vue 開發人員的提示:-避免直接操作 DOM

  5. 如何讓 Underscore 表現得像 Ramda?

  6. Node &Express 簡介

  7. Angular/VueJS/React 的 21 個免費儀表板/登陸頁面/UI 工具包模板

  1. CodePen 與 CodeSandbox - JavaScript 遊樂場比較

  2. JavaScript:2016 年回顧

  3. 為初學者解釋的 JavaScript 變量和數據類型💯

  4. 最糟糕的 js:%