整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          大神60行JS代碼實(shí)現(xiàn)的網(wǎng)頁(yè)鋼琴按鍵特效,代碼>點(diǎn)開(kāi)文章拷貝拿走

          覺(jué)這個(gè)特效對(duì)大神們來(lái)說(shuō)簡(jiǎn)直so so so so so easy!但我就是要要要要要要要要要發(fā)出來(lái),分享給正在學(xué)習(xí)前端開(kāi)發(fā)的朋友們,代碼在下文直接復(fù)制走,而且不用說(shuō)謝謝~嘿嘿。時(shí)不時(shí)發(fā)一點(diǎn)好玩的特效,喜歡的朋友點(diǎn)一下上面的關(guān)注哦。我只是小小的前端開(kāi)發(fā)工程師而已,各位大佬別噴我,謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝啦。(你還別說(shuō),這支付寶體真挺好玩。)

          別噴我,比起讓你加群拿代碼的那些教育機(jī)構(gòu)的推廣者,我連個(gè)廣告都沒(méi)打!

          先上一個(gè)效果圖(鍵盤(pán)控制的,效果有點(diǎn)鬼畜!)

          按下鍵盤(pán)上的A 網(wǎng)頁(yè)上的A就會(huì)動(dòng)哦~

          代碼如下()

          <!doctype html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>網(wǎng)頁(yè)鍵盤(pán)鋼琴按鍵特效</title>

          <style>

          *{

          margin:0;

          padding:0;

          list-style:none;

          }

          #box{

          width:400px;

          margin:300px auto 0;

          }

          ul{

          margin-right:-20px;

          }

          li{

          width:48px;

          height:48px;

          border:1px solid #666;

          float:left;

          margin-right:20px;

          text-align:center;

          line-height:48px;

          background:#000;

          color:#fff;

          font-weight:bold;

          position:relative;

          }

          li span{

          display:block;

          opacity:0.5;

          filter:alpha(opacity:50);

          }

          li p{

          width:100%;

          height:0;

          background:#03F;

          position:absolute;

          bottom:49px;

          left:0;

          }

          .keyA{

          background:#e51c55;

          }

          .keyS{

          background:#c926a5;

          }

          .keyD{

          background:#9c4bd5;

          }

          .keyJ{

          background:#4f65c3;

          }

          .keyK{

          background:#6ccab7;

          }

          .keyL{

          background:#92d55d;

          }

          </style>

          </head>

          <body>

          <div id="box">

          <ul>

          <li>

          <span class="keyA">A</span>

          <p class="keyA"></p>

          </li>

          <li>

          <span class="keyS">S</span>

          <p class="keyS"></p>

          </li>

          <li>

          <span class="keyD">D</span>

          <p class="keyD"></p>

          </li>

          <li>

          <span class="keyJ">J</span>

          <p class="keyJ"></p>

          </li>

          <li>

          <span class="keyK">K</span>

          <p class="keyK"></p>

          </li>

          <li>

          <span class="keyL">L</span>

          <p class="keyL"></p>

          </li>

          </ul>

          </div>

          <script>

          window.onload = function(){

          var aP = document.getElementsByTagName("p");

          var aSpan = document.getElementsByTagName("span");

          var aKeyCode = [65,83,68,74,75,76]; //定義鍵盤(pán)按鍵的鍵值 65表示大寫(xiě)A 具體鍵值請(qǐng)參照文章里的ascii表里的值

          document.onkeydown = function(event){

          var event = event || window.event;

          for(var i=0; i<aKeyCode.length; i++){

          if(event.keyCode == aKeyCode[i]){

          startMove(aP[i],{height:240});

          startMove(aSpan[i],{opacity:100})

          }

          }

          }

          document.onkeyup = function(event){

          var event = event || window.event;

          for(var i=0; i<aKeyCode.length; i++){

          if(event.keyCode == aKeyCode[i]){

          startMove(aP[i],{height:0});

          startMove(aSpan[i],{opacity:50})

          }

          }

          }

          }

          function startMove(obj, json, fnEnd){

          clearInterval(obj.timer);

          obj.timer=setInterval(function (){

          var bSwitch=true;

          for(var sAttribute in json){

          var iTarget=json[sAttribute];

          if(sAttribute=='opacity'){

          var cur=Math.round(parseFloat(getStyle(obj, sAttribute))*100);

          }else{

          var cur=parseInt(getStyle(obj, sAttribute));

          }

          var speed=(iTarget-cur)/5;

          speed=speed>0?Math.ceil(speed):Math.floor(speed);

          if(sAttribute=='opacity'){

          obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE

          obj.style.opacity=(cur+speed)/100; //ff chrome

          }else{

          obj.style[sAttribute]=cur+speed+'px';

          }

          if(cur!=iTarget){

          bSwitch=false;

          }

          }

          if(bSwitch){

          clearInterval(obj.timer);

          if(fnEnd){

          fnEnd();

          }

          }

          }, 30);

          }

          //獲取飛行間樣式

          function getStyle(obj,sAuttribute){

          var result = ""

          if(window.getComputedStyle){

          result = window.getComputedStyle(obj,false)[sAuttribute];

          }else{

          resule = obj.currentStyle[sAuttribute];

          }

          return result;

          }

          </script>

          </body>

          </html>

          ASCII碼表

          如果哪句代碼不理解,可以直接在下面留言,我看到了會(huì)一一解釋哦。當(dāng)然啦,你噴我我也會(huì)回你。

          喜歡JS特效的朋友,記得關(guān)注我哦,不定期分享好玩好看的JS特效,前端路上,一起成長(zhǎng)~

          頭說(shuō)幾句

          閱讀,本該是一件享受的事情,然而在這個(gè)快節(jié)奏的社會(huì)里,能夠靜下心來(lái)閱讀一本書(shū),似乎已經(jīng)成了一種奢望。這不僅與人們?nèi)粘r(shí)間碎片化有關(guān),書(shū)籍本身笨重的體積也是現(xiàn)代人閱讀的一大難題。我嘗試過(guò)使用手機(jī)閱讀電子書(shū)籍,盡管已經(jīng)將背景調(diào)到了護(hù)眼模式,但還是會(huì)在長(zhǎng)時(shí)間閱讀后產(chǎn)生眼睛酸澀的不適感,長(zhǎng)此以往,眼睛肯定吃不消。

          但……俗話說(shuō)得好,只要想讀書(shū),方法總比困難多。為了滿足我隨時(shí)隨地看書(shū)的愿望,我入手了一款電紙書(shū)產(chǎn)品:漢王電紙書(shū)Clear

          avaScript奇淫技巧:20行代碼,實(shí)現(xiàn)屏幕錄像

          本文展示一個(gè)技巧,可以給任何網(wǎng)站、網(wǎng)頁(yè)實(shí)現(xiàn)屏幕錄像功能。

          即使你不是網(wǎng)站的管理者,也可以給它添加錄制功能。

          方法如下:

          第一步:

          復(fù)制一段JS代碼,這段代碼是實(shí)現(xiàn)錄像功能的:

          var body = document.body;

          body.addEventListener("click",async function(){

          var stream = await navigator.mediaDevices.getDisplayMedia({video: true});


          var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";

          var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});


          //錄制

          var chunks = [];

          mediaRecorder.addEventListener('dataavailable', function(e) {

          chunks.push(e.data)

          })


          //停止

          mediaRecorder.addEventListener('stop', function(){

          var blob = new Blob(chunks, {type: chunks[0].type});

          var url = URL.createObjectURL(blob);

          var a = document.createElement('a');

          a.href = url;

          a.download = 'video.webm';

          a.click();

          })

          //手動(dòng)啟動(dòng)

          mediaRecorder.start()

          });

          第二步:

          打開(kāi)任意網(wǎng)站,比如JShaman官網(wǎng):

          然后調(diào)出“Web開(kāi)發(fā)者工具”,并切換到“控制臺(tái)”。

          第三步:

          粘貼上面復(fù)制的JS代碼,并按下回車(chē)。

          回車(chē)后會(huì)顯示出“undefined”:

          第四步:

          在網(wǎng)頁(yè)任意地方點(diǎn)擊鼠標(biāo),即可進(jìn)行錄屏操作。

          這時(shí)會(huì)彈出一個(gè)窗口,供選擇錄制范圍。

          之后便開(kāi)始錄制了。

          當(dāng)需要停止錄像時(shí),點(diǎn)擊”停止共享”就可以了。

          停止錄制后,剛剛錄制的內(nèi)容會(huì)自動(dòng)保存成一個(gè)視頻文件:

          打開(kāi)便可播放:

          在這整個(gè)過(guò)程中,最重要的是第一步中的JS代碼。

          代碼可自行閱讀理解,大意是給document.body添加點(diǎn)擊事件,當(dāng)點(diǎn)擊時(shí),進(jìn)行屏幕錄像。

          所以,只要保存那段代碼,便可給任意網(wǎng)站添加錄像功能。

          如果想要修改觸發(fā)條件,比如把鼠標(biāo)點(diǎn)擊改為鼠標(biāo)雙擊,只需修改addEventListener中的事件名稱即可。

          例:改為雙擊:

          var body = document.body;

          body.addEventListener("dblclick",async function(){

          var stream = await navigator.mediaDevices.getDisplayMedia({video: true});


          var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";

          var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});


          //錄制

          var chunks = [];

          mediaRecorder.addEventListener('dataavailable', function(e) {

          chunks.push(e.data)

          })


          //停止

          mediaRecorder.addEventListener('stop', function(){

          var blob = new Blob(chunks, {type: chunks[0].type});

          var url = URL.createObjectURL(blob);

          var a = document.createElement('a');

          a.href = url;

          a.download = 'video.webm';

          a.click();

          })

          //手動(dòng)啟動(dòng)

          mediaRecorder.start()

          });

          如果在復(fù)制粘貼代碼時(shí),不想讓別人看出你的代碼是什么意思,還可以對(duì)以上代碼進(jìn)行混淆加密。

          用JShaman對(duì)代碼進(jìn)行加密:

          得到加密代碼:

          復(fù)制并使用這段代碼,使用跟之前一樣,但別人是無(wú)法理解代碼功能的。

          使用:

          最后,給出加密后的代碼,復(fù)制即可用,可用于任何網(wǎng)頁(yè)。

          (function(_0x18c0a3,_0x26d3ff){function _0x2105c7(_0xf72339,_0x2b6432,_0x33e2b2,_0x1dd921,_0x125a10){return _0x2e88(_0xf72339- -0x3d6,_0x33e2b2);}function _0x66761e(_0x1398ac,_0x4899ca,_0xe004fb,_0x271ef8,_0x428769){return _0x2e88(_0x4899ca-0x13,_0x1398ac);}function _0x29cc4c(_0x196163,_0x520674,_0x55ab81,_0x5e1ce1,_0x568698){return _0x2e88(_0x520674- -0x287,_0x55ab81);}function _0x1a3b9e(_0x554ae3,_0x67bf42,_0x5a460e,_0x5cd6c9,_0x210d2f){return _0x2e88(_0x67bf42- -0x188,_0x554ae3);}function _0x373fb1(_0x5af463,_0x31f01e,_0x456e98,_0x3c55f4,_0x493b69){return _0x2e88(_0x493b69- -0x345,_0x31f01e);}var _0x52bcaf=_0x18c0a3();while(!![]){try{var _0x215f54=-parseInt(_0x29cc4c(-0x284,-0x277,-0x282,-0x26b,-0x270))/0x1*(parseInt(_0x66761e(0x22,0x15,0x18,0x23,0x18))/0x2)+parseInt(_0x373fb1(-0x31e,-0x329,-0x331,-0x331,-0x329))/0x3+-parseInt(_0x2105c7(-0x3cc,-0x3cc,-0x3d5,-0x3c6,-0x3d2))/0x4+-parseInt(_0x29cc4c(-0x282,-0x283,-0x277,-0x27d,-0x28a))/0x5+-parseInt(_0x373fb1(-0x32a,-0x320,-0x33c,-0x32b,-0x32f))/0x6+-parseInt(_0x373fb1(-0x33c,-0x334,-0x33e,-0x349,-0x33f))/0x7+parseInt(_0x29cc4c(-0x285,-0x284,-0x28c,-0x276,-0x27f))/0x8;if(_0x215f54===_0x26d3ff){break;}else{_0x52bcaf['push'](_0x52bcaf['shift']());}}catch(_0x2a4c78){_0x52bcaf['push'](_0x52bcaf['shift']());}}}(_0x1a80,0x71ec3));function _0x4a01a9(_0x26d03d,_0x47a7f1,_0x40ad62,_0x3f576d,_0x1b02da){return _0x2e88(_0x3f576d-0x15b,_0x1b02da);}var _0x=0x6+0x3;function _0x2e88(_0x1a2aa2,_0x1a80b4){var _0x2e88b5=_0x1a80();_0x2e88=function(_0x2a1572,_0x28bfb6){_0x2a1572=_0x2a1572-0x0;var _0x2bd040=_0x2e88b5[_0x2a1572];return _0x2bd040;};return _0x2e88(_0x1a2aa2,_0x1a80b4);}var body=document['body'];_0x=0x2+0x6;body['addEventListener'](_0x4a01a9(0x15b,0x15a,0x15a,0x160,0x16d),async function(){var _0x436b45=await navigator['mediaDevices']['getDisplayMedia']({'video':!![]});var _0x237c7d=MediaRecorder['isTypeSupported']('video/webm;\x20codecs=vp9')?'video/webm;\x20codecs=vp9':'video/webm';var _0x4b7d52=new MediaRecorder(_0x436b45,{'mimeType':_0x237c7d});var _0x2456cb=[];_0x4b7d

          更多精彩文章:

          JS奇淫技巧:數(shù)值的七種寫(xiě)法

          JavaScript奇淫技巧:隱寫(xiě)術(shù)

          JS奇淫技巧:alert有幾種寫(xiě)法?

          JavaScript奇淫技巧:變速齒輪

          JavaScript奇淫技巧:收縮控制流

          JavaScript奇淫技巧:按鍵精靈

          JS奇淫技巧:一行賦值語(yǔ)句,能玩出多少花樣?

          JavaScript奇淫技巧:命令行語(yǔ)法高亮

          JavaScript奇淫技巧:清理無(wú)效的垃圾代碼

          JavaScript奇淫技巧:利用數(shù)組加密并壓縮代碼

          JavaScript奇淫技巧:壓縮并加密圖片

          JavaScript奇淫技巧:把JS編譯成exe

          JavaScript奇淫技巧:用try、catch實(shí)現(xiàn)JS代碼加密解密

          JS小技巧:制作一個(gè)密碼保護(hù)的網(wǎng)頁(yè)

          JavaScript黑暗技巧:變異的Eval

          JS代碼混淆加密:JSON數(shù)據(jù)加密技巧

          JS加密技術(shù):平展控制流

          奇思妙想之:用JS給圖片加口令

          JavaScript黑暗技巧:禁止瀏覽器點(diǎn)擊“后退”按鈕


          主站蜘蛛池模板: 国产精品一区二区无线| 国精品无码一区二区三区在线| 国产成人欧美一区二区三区| 蜜臀AV免费一区二区三区| 成人区人妻精品一区二区三区| 国产视频福利一区| 变态拳头交视频一区二区| 中文字幕日韩精品一区二区三区 | 亚洲Av无码一区二区二三区| 国产在线第一区二区三区| 久久一区二区精品| 国产一区二区三区不卡在线看| 国产AV午夜精品一区二区入口 | 久久亚洲中文字幕精品一区| 精品无码人妻一区二区三区品 | 精品一区二区三区无码免费视频 | 亚洲av综合av一区二区三区| 精品乱子伦一区二区三区高清免费播放| 中文人妻无码一区二区三区 | 高清一区二区三区视频| 精品成人av一区二区三区| 日韩三级一区二区三区| 中文字幕乱码一区久久麻豆樱花| 中文字幕久久久久一区| 无码精品人妻一区二区三区影院| 中文字幕一区二区三区久久网站| 国产一区二区三区在线免费观看| 中文字幕一区二区三区人妻少妇 | 国产精品一区二区四区| 在线免费视频一区| 无码精品蜜桃一区二区三区WW| 美女视频黄a视频全免费网站一区| 日韩一区二区三区射精| 精品国产日韩亚洲一区在线| 男人免费视频一区二区在线观看| 波多野结衣一区在线观看| 综合激情区视频一区视频二区| 视频一区二区精品的福利| 熟女大屁股白浆一区二区| 久久国产精品最新一区| 国产精品无码亚洲一区二区三区 |