国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡單動(dòng)畫-讓你的背景圖動(dòng)起來!!!

Noodles / 666人閱讀

摘要:效果輪詢改變背景圖動(dòng)畫,讓世界地圖作為背景正向平移。效果二圖片描述鼠標(biāo)移動(dòng)后背景圖根據(jù)坐標(biāo)差計(jì)算移動(dòng)距離。

效果:
body{

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

輪詢改變body背景圖動(dòng)畫,讓世界地圖作為背景正向平移。

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

    polling();
    
效果二:
![圖片描述][2]
鼠標(biāo)移動(dòng)后背景圖根據(jù)坐標(biāo)差計(jì)算移動(dòng)距離。
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;
    }
});

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/86490.html

相關(guān)文章

  • 簡單動(dòng)畫你的背景圖動(dòng)起來!!!

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

    Acceml 評(píng)論0 收藏0
  • CSS相關(guān)文章

    摘要:如何用獲取虛擬鍵盤高度前端早讀課月號(hào)早讀文章由湯谷投稿分享。大殺器和把動(dòng)畫轉(zhuǎn)換成原生動(dòng)畫初來乍到,本文搬運(yùn)自我月份在知乎發(fā)的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面試中經(jīng)常被問到的。 如何用 js 獲取虛擬鍵盤高度?-前端早讀課 9月7號(hào)早讀文章由@湯谷投稿分享。正文從這開始~ 這是一個(gè)存在很久的歷史問題了,對(duì)于這樣一個(gè)具有普遍性的問題...

    FrozenMap 評(píng)論0 收藏0
  • 可能是最全的前端動(dòng)效庫匯總

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

    afishhhhh 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<