2. 程式人生 > >原生JS實現圖片翻轉旋轉效果

原生JS實現圖片翻轉旋轉效果

阿新 • • 發佈：2019-02-01
/* * 1.閃爍效果（瞬間將寬高都變為0，scale，並且是隨機的） * 2.圖片從小到大，同時透明度從1變成0（必須是當前圖片上一步效果走完了，才會開始） * 3.圖片旋轉，同時透明度從0變成1，有層次感（位移translate）（當所有圖片透明度都變為0的時候，才會開始） */ window.onload=function(){ var btn=document.getElementById('btn'); var imgs=document.querySelectorAll('img'); var
allEnd=0;//用來判斷所有的圖片是否都完成了所有的運動步驟 var on=true;//用來決定使用者是否可以再次點選 //給btn新增點選事件 btn.onclick=function(){ console.log("on:"+on); if(!on){ return; } on=false; var endNum=0;//運動完成的圖片數量 for(var i=0;i<imgs.length;i++){ //寫成自執行函式的原因：for迴圈速度很快，將會導致setTimeout中的i找不到值
(function(i){ setTimeout(function(){ montion(imgs[i],'10ms',function(){ this.style.transform='scale(0)';//因為函式用了call函式，所以可以用this，否則只能用imgs[i] },function(){ //第二步的運動從這裡開始
montion(this,'1s',function(){ this.style.transform="scale(1)"; this.style.opacity=0; },function(){ endNum++;//只要有一張圖片完成了第二步，則加1 if(endNum===imgs.length){ toBig(); } }) }); },Math.random()*1000); })(i); } //定時器，用來延遲時間，不讓圖片同步所放 }; //第三個運動效果 function toBig(){ /* *座標軸，x,y,z */ for(var i=0;i<imgs.length;i++){ imgs[i].style.transition=''; // imgs[i].style.opacity='1'; //想要一個物體有css3中的動作變化，那就需要給它一個初始值 imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)'; //自執行函式的目的是，為了找到i，否則for迴圈執行太快，會找不到i (function(i){ setTimeout(function(){ montion(imgs[i],'2s',function(){ this.style.opacity=1; this.style.transform='rotateY(-360deg) translateZ(0)' },function(){ allEnd++; if(allEnd===imgs.length){ console.log("allEnd:"+allEnd+',imgs.length:'+imgs.length); //這個條件成立，說明所有的圖片都運動完了，接下來才允許再次點選 //當所有運動完了以後，才允許再次點選 on=true; allEnd=0; } }); },Math.random()*1000); })(i); } } //運動函式(運動的物件，運動的時間，運動的屬性函式，運動完成後要做的事情) function montion(obj,time,doFn,callBack){ obj.style.transition=time; doFn.call(obj);//呼叫函式，並且把this的指向給obj var called=false;//這裡的原因是為了解決transitionend呼叫多次的bug obj.addEventListener('transitionend',function(){ if(!called){ callBack&&callBack.call(obj);//解決如果沒有傳入第四個callBack引數的問題 called=true; } },false);//事件三階段，第三個引數決定是在捕獲階段還是冒泡階段，呼叫此函式,false代表是在冒泡階段 } }

相關推薦

原生JS實現圖片翻轉旋轉效果

/* * 1.閃爍效果（瞬間將寬高都變為0，scale，並且是隨機的） * 2.圖片從小到大，同時透明度從1變成0（必須是當前圖片上一步效果走完了，才會開始） * 3.圖片旋轉，同時透明度從0變成1，有層次感（位移translate）（當所有圖片透明度都變為0的時

原生js實現圖片抖動效果

int clear 停止 動效 null scrip log 定時 實現 今天來寫一個關於圖片抖動的效果，需求是：點擊圖片，讓其抖動幾下停止（類似於蘋果手機填錯密碼之後會抖一下的效果），其實想要實現這個效果，原理就是，點擊之後，讓其左移動下然後右移動一下（每移動一下減幾像素

原生JS實現圖片放大鏡插件

spa ont 範圍 display 離開 寬度 部分 gin es2017 前 言 　　我們大家經常逛各種電商類的網站，商品的細節就需要用到放大鏡，這個大家一定不陌生，今天我們就做一個圖片放大鏡的插件，來看看圖片是如何被放大的……

原生JS實現圖片輪播

讓其 gin 偏移量 adding char 效率 lin doc 動畫效果 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

原生JS實現圖片懶加載之一：Element.getBoundingClientRect()

itl title get 有時 調用函數 HR intersect zh-cn ima 實際項目開放中，特別是電商項目，由於有大量的圖片加載必然會影響性能，所以實現圖片的懶加載是非常有必要的。 實現圖片懶加載的知識點 標簽的data-屬性 可視區域的監聽 實現圖片

原生js實現圖片懶加載

發送 else HR 默認 div adc dom操作 move += 原理： 將頁面中的img標簽src指向一張小圖片或者src為空，然後定義data-src（這個屬性可以自定義命名，我自己用data-src）屬性指向真實的圖片。 src指向一張默認的圖片，否則當src為

原生js實現圖片詳情頁面放大鏡

最近的網站專案需要實現這個放大鏡，在網上也下載了一些實現了的程式碼，不過感覺比較笨重，就自己寫了一次，實現了，需要的朋友可以拿去用; 以下是html部分： <!DOCTYPE html> <html> <head> <met

使用原生js實現輪播圖效果

這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生js寫了一個輪播圖效果，希望大家喜歡。 這是我釋出在github上的最後實現的效果：https://heternally.github.io/banner/ 下面我簡單跟大家說一下

html中使用JS實現圖片輪播效果

HTML 部分 <div id="bannner" class="main_center_bannar">

原生JS實現圖片拖拽移動與縮放

rgb asc col ice head () etl ini size <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name

用原生JS實現 圖片輪播切換 功能

效果如圖：程式碼如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title

原生js實現React拖拽效果（resize）附帶完整的demo

想找一個可以resize塊的元件，找了好幾天都沒找到合適的。 嘗試過的開源元件： “react-rnd”：被拖拽的塊採用的佈局方式是“position:absolute”,更改佈局的話拖拽的事件會失效，沒有仔細去研究原理。但是我是在不知道這個佈局怎麼去比較好

利用原生js實現輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生輪播圖</title> <style type="text

原生javascript實現圖片輪播效果

         最近學習javascript實現動畫效果，就用原生的javascript程式碼實現了圖片輪播的效果，供大家參考學習。 1.首先設定圖片輪播的地方（id=banner） 2.然後是一個圖片組 3.然後是一個按鈕層，用來定點陣圖片組( ul-->li)

JS實現圖片無縫滾動效果

首先，藉助一張草圖來簡單說明一下往左移動的做法（往右相同）。 如上圖所示，圖片的無縫滾動原理其實是把滾動的圖片複製成兩份並聯排列，當滾動完一次後就把圖片扯回到起點，重新滾動。這裡的往左運動把圖片扯回起點的臨界點是offsetLeft的絕對值大於offset

原生JS實現圖片滿屏自動輪播求助，大神趕緊來吧！

上週去面試前端開發，那個程式猿大哥就直接讓我上機操練了，做一個“簡單”的網頁，當然，對我來說是很難的，畢竟剛開始學習。模板網頁的地址在這裡，有兩個： 搞了好長時間都沒弄出來，真的快要崩潰了，我就直接上程式碼吧，哪位大神看到支支招，給一些關鍵的建議，主要是滿屏圖片輪播

JS實現圖片輪播效果（自動和手動）

本次輪播效果圖如下：具有以下功能：1.自動播放（滑鼠進入顯示區域時停止播放） 2.左右焦點切換  3.底下小按鈕切換以下為實現程式碼：首先是html程式碼：<!DOCTYPE html> <html lang="en"> <head>

原生JS實現淡入淡出效果(fadeIn/fadeOut/fadeTo)

淡入淡出效果,在日常專案中經常用到,可惜原生JS沒有類似的方法,而有時小的頁面並不值得引入一個jQuery庫,所以就自己寫了一個,已封裝, 有用得著的朋友, 可以直接使用. 程式碼中另附有一個設定元素透明度的方法, 是按IE規則(0~100)設定, 若改成標準設定方法(0.00~1.00), 下面使用時請

js實現圖片浮動的效果

利用js中的window物件，實現的一個圖片浮動的效果   思路：首先要有一個div來供圖片使用，這個div將成為我們控制圖片的區域，它在網頁中的起始座標為（0，0）；        其次，我們要設定圖片在座標軸上的執行速度，即橫向（x）的執行速度和縱向（y）的執行速度；

原生JS實現圖片的輪流播放

網頁展示中常用到圖片的輪流播放，這裡使用了四張長圖來進行圖片輪放，下面是程式碼： f7.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">