不浮誇且不單調——監聽鼠標圖片移動動畫

阿新 • • 發佈：2017-11-05

pla 500px -s weixin .cn z-index 移動圖片 att cte

鼠標監聽實現圖片動畫

　　這是一個小的動畫，監聽鼠標的移動，來實現圖片的移動視覺特效。雖然功能不是那麽的強大，但應用範圍還是很廣泛的，不浮誇且不是單調。

先給大家欣賞一下樣式。

小樣子

技術分享

代碼：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>鼠標移動圖片</title>
        <style>
            body {
                margin:  
0;
                background-image: url(img/beijing.jpg);
            }
            
            #wrap {
                width: 100%;
                height: 800px;
                margin: 30px auto;
                
                position: relative;
            }
            
            #wrap img {
                position: absolute;
            }
            
            #wrap img:nth 
-of-type(1){
                width: 200px;
                height: 300px;
                left: 300px;
                top: 30px;
                z-index: 0;
    
            }
            #wrap img:nth-of-type(2){
                width: 150px;
                height: 200px;
                left: 200px;
                top: 300px;
                z-index: 1;
    
            }
            #wrap img:nth-of-type(3){
                width: 150px;
                height: 190px;
                right: 100px;
                top: 50px;
                z-index:2;
    
            }
            #wrap img:nth-of-type(4){
                width: 200px;
                height: 200px;
                left: 400px;
                top: 30px;
                z-index: 3;
    
            }
            #wrap img:nth-of-type(5){
                width: 200px;
                height: 200px;
                right: 500px;
                top: 70px;
                z-index: 4;
    
            }
            #wrap img:nth-of-type(6){
                width: 200px;
                height: 200px;
                right: 200px;
                top: 200px;
                z-index: 5;
    
            }
            #wrap img:nth-of-type(7){
                width: 400px;
                height: 400px;
                right: 35%;
                top: 200px;
                z-index: 6;
    
            }
        </style>
    </head>

    <body>
        <div id="wrap">
            <img  src="img/圖像(2).png"/>
            <img  src="img/圖像(3).png"/>
            <img  src="img/dada_man_ray_skulptur_cadeau_01.gif"/>
            <img  src="img/圖像(5).png"/>
            <img  src="img/圖像(6).png"/>
            <img  src="img/capture_decran_2016_03_16_a_151542.jpg"/>
            <img  src="img/圖像(8).png"/>
        </div>
        <script>
            var oWrap = document.getElementById("wrap");
            var aImg = oWrap.getElementsByTagName("img");
            var iMax = 7;
            //獲取圖片的初始位置
            for(var i = 0; i < aImg.length; i++) {
                aImg[i].startX = parseInt(getStyle(aImg[i], ‘left‘))
            }
            oWrap.onmousemove = function(ev) {
                ev = ev || window.event;
                //獲取鼠標的位置與div中心點位置的距離
                var Yd = ev.clientX - (oWrap.offsetLeft + this.offsetWidth / 5)
                for(var i = 0; i < aImg.length; i++) {
                    //獲取每個img的z-index
                    var iZindex = getStyle(aImg[i], ‘zIndex‘)
                    //Zindex越大移動的相對距離越小
                    var iDisL = -parseInt(Yd / iMax * (iMax - iZindex) / 20)
                    //圖片的距離等於原先的距離加上計算的距離
                    aImg[i].style.left = aImg[i].startX + iDisL + ‘px‘
                }
            }

            function getStyle(obj, attr) {
                if(obj.currentStyle) {
　　　　　　　　　　//IE瀏覽器
                    return obj.currentStyle[attr];
                }
                return getComputedStyle(obj)[attr];
            }
        </script>
    </body>

</html>

復制代碼後記得更改一下圖片，我設置的是監聽#wrap範圍的鼠標，只是監聽x軸的，大家可以研究添加y軸的監聽移動。

最後

　　　　如果有更好的方式方法，期待大家分享，共同學習，共同進步。

不浮誇且不單調——監聽鼠標圖片移動動畫

pla 500px -s weixin .cn z-index 移動圖片 att cte 鼠標監聽實現圖片動畫　　這是一個小的動畫，監聽鼠標的移動，來實現圖片的移動視覺特效。雖然功能不是那麽的強大，但應用

同一區域網內其他電腦連線伺服器Oracle連線不上，顯示無監聽程式

問題描述：A機，B機，C機在同一區域網內，A機作為資料庫服務，起了監聽，且A機通過127.0.0.1或者localhost可以訪問，但是B機，C機訪問時報ORA-12541:無監聽程式的錯。解決步驟： 1. 修改A機的app\****\product\11.2.0

解開一個疑惑，為什麽LVS開放的端口，使用netstat或ss命令，不能查找到其監聽的端口呢？

規則用戶 sage www spa style 9.png 訪問分享 RT，這個疑問，本周一直在心裏，今天找到一個說法。 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 另外LVS規則算是內核方法，用netstat -ntul

JSONArray.fromObject不執行且不報錯問題的解決

重寫 4.2 技術分享 array fff bean 今天打印開始今天在寫javaweb工程的時候需要向前臺傳json格式的數據，用到了json-lib-2.4-jdk15.jar等一系列包，然而卻出現如下狀況： CityBean是一個ja

JQuery如何實現雙擊事件時不觸發單擊事件，解決鼠標單雙擊沖突問題

方法 span eve 雙擊事件 col button null pan 綁定在jQuery的事件綁定中，如果元素同時綁定了單擊事件(click)和雙擊事件(dblclick),那麽執行單擊事件(click)時，不會觸發雙擊事件(dblclick)，執行雙擊事件(dbl

IBM的\"癌症救星\"到底行不行媒體：不安全且不正…

@央廣軍事11月10日訊息,2018中國航展上首次公開展出的“瞭望者Ⅱ”察打一體導彈無人艇，是剛剛成功進行首發導彈飛行試驗命中靶心的實艇，試驗成功後隨即吊裝到展位與公眾見面。據媒體此前報道，該艇是中國第一艘導彈無人艇，也是繼以色列拉斐爾海上騎士後全球第二個成功發射導彈的無人艇，填補了國內導彈無人艇這一技術空白

關於string的一個不完全且不保證正確的總結

參考（或全部或部分轉載：）https://www.cnblogs.com/xiaoxi/p/6036701.html （詳細內容參考以上鍊接，這裡簡單記些需要注意或易混的問題） String str1="program"; String str2=new String("program"

ubuntu下桌面右鍵不可用且不顯示檔案的解決

在終端執行gconf-editor在開啟的新視窗“配置編輯器“的左邊，一級級依次（點選三角形）展開下列項："/"->"apps"->"nautilus“，點選“preferences”項，在視窗右方的配置鍵列表中，找到“show_desktop”配置鍵，雙擊“sh

Android studio匯入專案卡住、匯入後目錄不正確且不能執行的解決辦法

AndroidStudio匯入專案一直卡在Building gradle project info，實際上是因為你匯入的這個專案使用的gradle與你已經擁有的gradle版本不一致，導致需要下載該專案需要的gradle版本，不知是被牆了還是什麼原因，反正就是會一直卡住，直至下載完成(如果能下載完成的話，

監聽瀏覽器標簽切換

hang list col add chang clas 自己的自己 study document.addEventListener("visibilitychange", function () { document.title = document.

AnimationDrawable監聽播放結束及ImageSwitcher動畫圖片切換，帶動畫

//java程式碼動態載入動畫或者res/anim/中載入 private void setRepaymentDate(NewProductInfoBean productInfo) {

js裏div隨著鼠標一起移動

hang chang num pan cti win switch ret sem <script> function move(keynum) { //獲取屏幕寬度 var w=screen.availWidth;

Unity開發之實現更換鼠標圖片

put rect 更換 load() 設置 sta 不出 use rec 在玩遊戲的時候，感覺遊戲裏的鼠標圖片特酷炫，23333，今天我就總結了兩種方法！我是做Unity開發的，所以方法僅針對於Unity平臺。。。。。。。。方法如下： 1、Unity客戶端直接更改，步驟

ORA-12516: 監聽程序找不到符合協議堆棧要求的可用處理程序

ram serial 最好的 limit rac com 當前 sqlnet ogr 產生問題的原因是：會話連接數過多，需要kill掉，釋放無用連接步驟： 1. 查看當前總會話數和進程數，這兩個視圖就是跟會話及進程有關的重要視圖啦，信息都是從這裏面取的。

記錄一次處理https監聽不正確的過程

負載均衡 https 502 nginx 金山雲今天開發反饋在測試金山雲設備的時候遇到了這樣的一個現象：wget https://funchlscdn.lechange.cn/LCLR/2K02135PAK01979/0/0/20170726085033/dev_201707260850

vue使用element-ui的el-input監聽不了鍵盤事件解決

運行 string 封裝應該 login ring 執行 -i 隱藏 vue使用element-ui的el-input監聽不了鍵盤事件，原因應該是element-ui自身封裝了一層div在input標簽外面，把原來的事件隱藏了，所以如下代碼運行是無響應的： <el-

類似吸頂功能解決io不能實時監聽onscroll的觸發問題

內核所有 ble 解決 classname 監聽頁面 osi window 問題：近期項目需要一個類似西東功能，當頁面向上滾動160px後div固定在頂部解決方法：首先，想到的是window.onscroll方法　　.fixed{position:fixed;-we

dwz監聽日期變化,dwz日期控件onchange不起作用,dwz框架時間控件不支持onchange事件

getdate mst art sta rst this show onchange log 轉載自：http://blog.csdn.net/sp308036654/article/details/50638348 <input type="text" class

vue監聽不到props中的值時

dia div media handle iat prop hand function handler 已解決： watch: { 　　data: { 　　　　immediate: true, 　　　　handler: function(newVal

Oracle數據庫運維：要對監聽日誌文件（listener.log）進行定期清理，如果不定期清理，會遇到下面一些麻煩

tab 額外機器寫入 bpa 性能 connect user ini 原文鏈接： http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetail.aspx?EmPreviewTypeV=2&

不浮誇且不單調——監聽鼠標圖片移動動畫

相關推薦