簡單動畫－讓你的背景圖動起來!!!

Acceml 發布于2019-08-01 16:05 / 1562人閱讀

摘要：效果輪詢改變背景圖動畫，讓世界地圖作為背景正向平移。效果二圖片描述鼠標移動后背景圖根據坐標差計算移動距離。

效果：
body{

        margin: 0px;
        height:100%;
        width:100%;
        background-image: url("bg.png");
        background-position-x: 0px;
        background-position-y: 0px;
        background-repeat: repeat;
    }

輪詢改變body背景圖動畫，讓世界地圖作為背景正向平移。

    var body = $("body");
    var x =0;
    function polling() {
        x += 5;
        body.animate({
            "background-position-x": x+"%",
        }, 400, "linear");
        setTimeout(polling,300)
    }

    polling();
    
效果二：
![圖片描述][2]
鼠標移動后背景圖根據坐標差計算移動距離。
var last = null;
var body = $("body");
$(document).mousemove(function(event){
    if(last == null){
        last = {
            x: event.pageX,
            y: event.pageY
        };
        return;
    }else{
        offset = {
            x: event.pageX - last.x,
            y: event.pageY - last.y
        };
        var top  = parseInt(body.css("background-position-y"))-offset.y;
        var max = screen.availHeight - 1024;
        if(max >= 0) max = 0;
        if(top > 0) top = 0;
        if(top < max) top = max;
        body.css({
            "background-position-x":(parseInt(body.css("background-position-x"))-offset.x)+"px",
            "background-position-y":top+"px"
        });
        last.x = event.pageX;
        last.y = event.pageY;
    }
});

云服務器 GPU云服務器萬你的動起來跳起來爬起來

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50290.html

簡單動畫－讓你的背景圖動起來!!!

摘要：效果輪詢改變背景圖動畫，讓世界地圖作為背景正向平移。效果二圖片描述鼠標移動后背景圖根據坐標差計算移動距離。效果：showImg(https://segmentfault.com/img/bVG0hf?w=1331&h=665); body{ margin: 0px; height:100%; width:100%; ba...

Noodles 2019-08-21 11:16 評論0 收藏0
CSS相關文章

摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉換成原生動畫初來乍到，本文搬運自我月份在知乎發的文章。前端面試之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面試中經常被問到的。如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

FrozenMap 2019-08-29 14:21 評論0 收藏0
可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0