JavaScript+CSS相簿特效實例程式碼-js教程-PHP中文網

首頁

web前端

js教程

JavaScript+CSS相簿特效實例程式碼

韦小宝

Jan 25, 2018 am 11:07 AM

css

下面小編就為大家帶來一篇JavaScript+CSS相簿特效實例程式碼。小編覺得蠻不錯的，現在就分享JavaScript+css的源碼給大家，也給大家做個參考。對JavaScript和css製作相簿感興趣一起跟隨小編過來看看吧

#嗯就是這樣一個例子，視頻學到的一個特效，實際用處並不大，但是可以幫助理解JS語言和熟悉CSS3樣式。

設計：

觀察一張圖片的變化，發現：

1、圖片縮放（隨機，且不是同時移動）

1、從大到小

2、從小到大，透明度為從1到0（在第一步運動完成後立即開始）

2、圖片旋轉（隨機，並且不是同時運動的。需要在全部運動走完以後開始）

#3.因為每張圖片是隨機開始變換的，所以起始時間是不同的，這裡可設定一個延遲器setTimeout，時間用random隨機產生即可。

4. 中間需要用到自執行函數，因為setTimeout無視for迴圈的i，所以每次延時器運行的時候i可能都出錯，用自執行函數儲存i的每一次值。

5. 轉換期間按鈕的p是不能點選的，需要標記和判斷。

6.運動共有兩個，縮放和旋轉，注意縮放全部結束才能開始旋轉，這裡也要處理好。

筆記：

scale是縮放

transition 過渡，延遲

子函數修改父親的值，就是閉包

#自執行函數這裡主要用來保存i的每一次值

如果直接加定時器，就不管外面循環，1s後才執行，這時的i都不知道到哪裡了，可能越界

#Math.random()產生的值是setTimeout的一個參數，延遲的時間

setTimeout延遲時間也與電腦卡影響

transitionend只要過渡了就會執行，它是根據樣式來計算的

縮放和透明都會觸發transitionend

call()改變this指向的物件

然後就直接實作了，在載入頁面的時候就執行這個特效。

補上中間查到的一些資料：

1.CSS3 opacity 屬性：

##值valueinherit

##描述
指定不透明度。從0.0（完全透明）到1.0（完全不透明）
Opacity屬性的值應該從父元素繼承

#2.HTML DOM scale() 方法：
參數

參數sx, sy

描述

scale() 方法為畫布的目前變換矩陣新增一個縮放變換。縮放透過獨立的水平和垂直縮放因子來完成。例如，傳遞一個值 2.0 和 0.5 將會導致繪圖路徑寬度變成原來的兩倍，而高度變成原來的 1/2。指定一個負的 sx 值，會導致 X 座標沿著 Y 軸對折，而指定一個負的 sy 會導致 Y 座標沿著 X 軸對折。

這裡我直接一個參數就是同時縮小高度和寬度

p是塊標籤，現在這種情況此p的標籤會被裡面圖片高度自己撐起來，img標籤都是預設向左漂浮的，剛好每行10個每個80px
margin: 0 auto是margin: 0 auto 0 auto的簡寫，也就是左右自動居中，至於為什麼沒有緊挨著上面的p，這個應該是上面那個margin: 80px auto，已經設定了跟下面的p外邊距80px距離

btn的高度沒有設置，靠font撐的

#剩下就是程式碼了，註解很詳細，回呼函數很多。。：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  /*图片容器整体样式，左右居中 视角景深800px */
  #imgWrap{
  width: 800px;
  height: 400px;
  margin: 80px auto;
  perspective: 800px;
  }

  /*左对齐，高宽*数量=整体p*/
  #imgWrap img{
  float: left;
  width: 80px;
  height: 80px;
  }

  #btn{
  width: 100px;
  /*height: 40px 这里不定义就是跟font大小一样*/
  background: rgb(0,100,0);
  padding: 0 20px;
  /*font-size 和 line-height 中可能的值。*/
  font: 16px/40px "微软雅黑";
  color: #fff;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #000;
  cursor: pointer;
  }
 </style>
 <script>
  /*
  * 1、图片缩放（随机，并且不是同时运动）
  * 1、从大到小
  * 2、从小到大，透明度从1到0（在第一步运动完成后立马开始）
  *
  * 2、图片旋转（随机，并且不是同时运动的。需要在全部运动走完以后开始）
  */

  window.onload=function(){
  var btn=document.getElementById("btn");
  // 选择所有元素
  var imgs=document.querySelectorAll("img");
  var endNum=0; //它代表图片运动完成的数量
  var canClick=true; //它代表用户能否再次点击

  btn.onclick=function(){
   if(!canClick){
   return; //以下的代码不要走了
   }
   canClick=false;


   for(var i=0;i<img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy" s.length;i++){
   (function(i){
    setTimeout(function(){
    /*imgs[i].style.transition=&#39;100ms&#39;;
    imgs[i].style.transform=&#39;scale(0)&#39;;
    imgs[i].style.opacity=&#39;0&#39;;

    imgs[i].addEventListener(&#39;transitionend&#39;,function(){
     console.log(1);
    });*/

    motion(imgs[i],&#39;50ms&#39;,function(){
     this.style.transform=&#39;scale(0)&#39;;
    },function(){
     motion(this,&#39;1s&#39;,function(){
     this.style.transform=&#39;scale(1)&#39;;
     this.style.opacity=&#39;0&#39;;
     },function(){
     //在这里表示图片缩放的运动已经全部完成了，接着走第二个运动

     endNum++;
     if(endNum==imgs.length){
      //所有的运动都完成了
      //console.log(&#39;所有的运动都完成了&#39;)
      rotate();
      //endNum=0;
     }
     });
    });
    },Math.random()*1000);
   })(i);
   }
  };


  //旋转功能
  function rotate(){
   for(var i=0;i<img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy" s.length;i++){
   //给运动来一下初始化
   imgs[i].style.transition=&#39;&#39;;
   /*imgs[i].style.opacity=1;*/
   imgs[i].style.transform=&#39;rotateY(0deg) translateZ(-&#39;+Math.random()*500+&#39;px)&#39;;

   //运动来了，自执行函数
   (function(i){
    setTimeout(function(){
    motion(imgs[i],&#39;2s&#39;,function(){
     this.style.opacity=1;
     this.style.transform=&#39;rotateY(-360deg) translateZ(0)&#39;;
    },function(){
     endNum--; //因为在上次运动结束的时候，endNum的值已经加到了50了
     //console.log(endNum);
     if(endNum==0){
     //所有的运动都完成了
     canClick=true;
     //endNum=0
     }
    });
    },Math.random()*1000);
   })(i);
   }
  }

  //运动函数
  function motion(obj,timer,doFn,callBack){
   //motion(运动对象,运动时间(字符串+单位),运动属性(函数),运动结束后的回调函数)
   obj.style.transition=timer;
   doFn.call(obj);//改变对象

   var end=true; //用来知道过渡有没有完成一次

   //结束事件处理函数
   function endFn(){
   if(end){
    //callBack&&callBack.call(obj);
    if(callBack){
    callBack.call(obj);
    }

    end=false; //改成false，下次就不会走这个if了
   }

   obj.removeEventListener(&#39;transitionend&#39;,endFn); //结束后就把这个事件取消掉，要不它会一直带在身上
   }

   obj.addEventListener(&#39;transitionend&#39;,endFn);
  }
  };
 </script>
 </head>
 <body>
 <p id="imgWrap">
  <img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/9.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/10.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/11.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/12.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/13.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/14.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/15.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/16.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/17.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/18.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/19.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/20.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/21.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/22.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/23.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/24.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/25.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/26.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/27.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/28.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/29.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/30.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/31.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/32.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/33.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/34.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/35.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/36.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/37.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/38.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/39.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/40.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/41.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/42.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/43.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/44.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/45.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/46.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/47.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/48.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/49.jpg"  class="lazy"   alt="" />
  <img src="/static/imghwm/default1.png"  data-src="images/50.jpg"  class="lazy"   alt="" />
 </p>
 <p id="btn">点击查看效果</p>
 </body>
</html>

以上就是本篇文章的所有內容，希望對大家學習提供到幫助！！

相關推薦：

javascript陣列拍平方法是來詳解

JavaScript實作向select下拉框中新增和刪除元素實例分享

javascript演算法之二叉搜尋樹的範例程式碼

描述
水平和垂直的縮放因子。

以上是JavaScript+CSS相簿特效實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。