首頁 > 開發者 > 手機程式開發

左上方帶緩衝效果跟隨螢幕移動的圖片

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   http   io   ar   os   java   div   on   art   

<html>    <head>    <title>左上方帶緩衝效果跟隨螢幕移動的圖片-<a target=_blank href="http://www.caopingzhixiao.com/">河北草坪</a></title>    <style type="text/css">    #floater {    position: absolute;    left: 500;    top: 146;    width: 125;    visibility: visible;    z-index: 10;    }</style>    </head>    <body>    <div ID="floater" style="left: 0px; top: 0px">    <p align="center">    <img SRC="/images/changshi.ico" border="0" width="55" height="55">    </div><script LANGUAGE="JavaScript">    self.onError=null;    currentX = currentY = 0;    whichIt = null;    lastScrollX = 0; lastScrollY = 0;    NS = (document.layers) ? 1 : 0;    IE = (document.all) ? 1: 0;    <!-- STALKER CODE -->    function heartBeat() {    if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }    if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }    if(diffY != lastScrollY) {    percent = .1 * (diffY - lastScrollY);    if(percent > 0) percent = Math.ceil(percent);    else percent = Math.floor(percent);    if(IE) document.all.floater.style.pixelTop += percent;    if(NS) document.floater.top += percent;    lastScrollY = lastScrollY + percent;    }    if(diffX != lastScrollX) {    percent = .1 * (diffX - lastScrollX);    if(percent > 0) percent = Math.ceil(percent);    else percent = Math.floor(percent);    if(IE) document.all.floater.style.pixelLeft += percent;    if(NS) document.floater.left += percent;    lastScrollX = lastScrollX + percent;    }    }    <!-- /STALKER CODE -->    <!-- DRAG DROP CODE -->    function checkFocus(x,y) {    stalkerx = document.floater.pageX;    stalkery = document.floater.pageY;    stalkerwidth = document.floater.clip.width;    stalkerheight = document.floater.clip.height;    if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;    else return false;    }    function grabIt(e) {    if(IE) {    whichIt = event.srcElement;    while (whichIt.id.indexOf("floater") == -1) {    whichIt = whichIt.parentElement;    if (whichIt == null) { return true; }    }    whichIt.style.pixelLeft = whichIt.offsetLeft;    whichIt.style.pixelTop = whichIt.offsetTop;    currentX = (event.clientX + document.body.scrollLeft);    currentY = (event.clientY + document.body.scrollTop);    } else {    window.captureEvents(Event.MOUSEMOVE);    if(checkFocus (e.pageX,e.pageY)) {    whichIt = document.floater;    StalkerTouchedX = e.pageX-document.floater.pageX;    StalkerTouchedY = e.pageY-document.floater.pageY;    }    }    return true;    }    function moveIt(e) {    if (whichIt == null) { return false; }    if(IE) {    newX = (event.clientX + document.body.scrollLeft);    newY = (event.clientY + document.body.scrollTop);    distanceX = (newX - currentX);    distanceY = (newY - currentY);    currentX = newX;    currentY = newY;    whichIt.style.pixelLeft += distanceX;    whichIt.style.pixelTop += distanceY;    if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;    if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;    if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;    if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;    event.returnValue = false;    } else {    whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);    if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;    if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;    if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;    if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;    return false;    }    return false;    }    function dropIt() {    whichIt = null;    if(NS) window.releaseEvents (Event.MOUSEMOVE);    return true;    }    <!-- DRAG DROP CODE -->    if(NS) {    window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);    window.onmousedown = grabIt;    window.onmousemove = moveIt;    window.onmouseup = dropIt;    }    if(IE) {    document.onmousedown = grabIt;    document.onmousemove = moveIt;    document.onmouseup = dropIt;    }    if(NS || IE) action = window.setInterval("heartBeat()",1);    </script>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <br><br><hr>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    <p>　</p>    </body></html>

左上方帶緩衝效果跟隨螢幕移動的圖片

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More