js滑鼠移動實現圖片立體滾動效果
本章節分享一段程式碼例項,它實現了滑鼠移動能夠使圖片立體滾動效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html{ overflow:hidden; } body{ position:absolute; margin:0px; padding:0px; background:#fff; width:100%; height:100%; } #screen{ position:absolute; left:10%; top:10%; width:80%; height:80%; background:#fff; } #screen img{ position:absolute; cursor:pointer; width:0px; height:0px; -ms-interpolation-mode:nearest-neighbor; } #bankImages{ visibility:hidden; } #FPS{ position:absolute; right:5px; bottom:5px; font-size:10px; color:#666; font-family:verdana; } </style> <script type="text/javascript"> /* ==== Easing function ==== */ var Library = {}; Library.ease = function () { this.target = 0; this.position = 0; this.move = function (target, speed) { this.position += (target - this.position) * speed; } } var tv = { /* ==== variables ==== */ O : [], fps : 0, screen : {}, angle : { x : new Library.ease(), y : new Library.ease() }, camera : { x : new Library.ease(), y : new Library.ease() }, create3DHTML : function (i, x, y, z, sw, sh) { /* ==== create HTML image element ==== */ var o = document.createElement('img'); o.src = i.src; tv.screen.obj.appendChild(o); /* ==== 3D coordinates ==== */ o.point3D = { x : x, y : y, z : new Library.ease(), sw : sw, sh : sh, w : i.width, h : i.height }; o.point3D.z.target = z; /* ==== push object ==== */ o.point2D = {}; tv.O.push(o); /* ==== on mouse over event ==== */ o.onmouseover = function () { if (this != tv.o) { this.point3D.z.target = tv.mouseZ; tv.camera.x.target = this.point3D.x; tv.camera.y.target = this.point3D.y; if (tv.o) tv.o.point3D.z.target = 0; tv.o = this; } return false; } /* ==== on mousedown event ==== */ o.onmousedown = function () { if (this == tv.o) { if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0; else { tv.o = false; this.onmouseover(); } } } /* ==== main 3D function ==== */ o.animate = function () { /* ==== 3D coordinates ==== */ var x = this.point3D.x - tv.camera.x.position; var y = this.point3D.y - tv.camera.y.position; this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08); /* ==== rotations ==== */ var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position; var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position; var yz = tv.angle.cy * xz - tv.angle.sy * x; var yx = tv.angle.sy * xz + tv.angle.cy * x; /* ==== 2D transform ==== */ var scale = tv.camera.focalLength / (tv.camera.focalLength + yz); x = yx * scale; y = xy * scale; var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw)); var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh)); /* ==== HTML rendering ==== */ var o = this.style; o.left = Math.round(x + tv.screen.w - w * .5) + 'px'; o.top = Math.round(y + tv.screen.h - h * .5) + 'px'; o.width = w + 'px'; o.height = h + 'px'; o.zIndex = 10000 + Math.round(scale * 1000); } }, /* ==== init script ==== */ init : function (structure, FL, mouseZ, rx, ry) { this.screen.obj = document.getElementById('screen'); this.screen.obj.onselectstart = function () { return false; } this.screen.obj.ondrag = function () { return false; } this.mouseZ = mouseZ; this.camera.focalLength = FL; this.angle.rx = rx; this.angle.ry = ry; /* ==== create objects ==== */ var i = 0, o; while( o = structure[i++] ) this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh); /* ==== start script ==== */ this.resize(); mouse.y = this.screen.y + this.screen.h; mouse.x = this.screen.x + this.screen.w; /* ==== loop ==== */ setInterval(tv.run, 16); setInterval(tv.dFPS, 1000); }, /* ==== resize window ==== */ resize : function () { var o = tv.screen.obj; if (o) { tv.screen.w = o.offsetWidth / 2; tv.screen.h = o.offsetHeight / 2; for(tv.screen.x=0,tv.screen.y=0;o!=null;o=o.offsetParent){ tv.screen.x += o.offsetLeft; tv.screen.y += o.offsetTop; } } }, /* ==== main loop ==== */ run : function () { tv.fps++; /* ==== motion ease ==== */ tv.angle.x.move(-(mouse.y-tv.screen.h-tv.screen.y)*tv.angle.rx,.1); tv.angle.y.move((mouse.x-tv.screen.w-tv.screen.x)*tv.angle.ry,.1); tv.camera.x.move(tv.camera.x.target, .025); tv.camera.y.move(tv.camera.y.target, .025); /* ==== angles sin and cos ==== */ tv.angle.cx = Math.cos(tv.angle.x.position); tv.angle.sx = Math.sin(tv.angle.x.position); tv.angle.cy = Math.cos(tv.angle.y.position); tv.angle.sy = Math.sin(tv.angle.y.position); /* ==== loop through images ==== */ var i = 0, o; while( o = tv.O[i++] ) o.animate(); }, /* ==== trace frames per seconds ==== */ dFPS : function () { document.getElementById('FPS').innerHTML = tv.fps + ' FPS'; tv.fps = 0; } } /* ==== global mouse position ==== */ var mouse = { x : 0, y : 0 } document.onmousemove = function(e) { if (window.event) e = window.event; mouse.x = e.clientX; mouse.y = e.clientY; return false; } /* ==== starting script ==== */ onload = function() { onresize = tv.resize; /* ==== build grid ==== */ var img = document.getElementById('bankImages').getElementsByTagName('img'); var structure = []; for (var i = -300; i <= 300; i += 120) for (var j = -300; j <= 300; j += 120) structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 }); /* ==== let's go ==== */ tv.init(structure, 350, -200, .005, .0025); } </script> </head> <body> <div id="screen"></div> <div id="bankImages"> <img alt="" src="mytest/demo/dborder.jpg"> </div> <div id="FPS"></div> </body> </html>
相關文章
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- js實現圖片上下滾動background-positionJS
- jQuery圖片無縫滾動效果jQuery
- VS+Qt+Halcon——顯示圖片,實現滑鼠縮放、移動圖片QT
- 移動端無限滾動載入 js實現原理JS
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- 前端實現文字滾動效果前端
- JQuery實現圖片輪播無縫滾動jQuery
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- JS實現馬賽克圖片效果JS
- 直播軟體搭建,Android實現文字滾動播放效果Android
- 滾動載入圖片(懶載入)實現原理
- 巢狀滾動效果實現討論巢狀
- 頁面圖片自動滾動
- 一起來實現圖片滾動懶載入
- 什麼是視差滾動?如何實現視差滾動的效果?
- js 滾輪控制圖片縮放大小和拖動JS
- 直播軟體原始碼,CSS3實現圖片立體旋轉動畫原始碼CSSS3動畫
- 使用純 CSS 實現滾動陰影效果CSS
- anime.js 網頁動畫庫,輕鬆實現網頁數字滾動效果JS網頁動畫
- 原生JS實現隨著滑鼠滾動到元素位置觸發對應css3動畫,簡單易用滾動監測JSCSSS3動畫
- js實現移動端圖片預覽:手勢縮放, 手勢拖動,雙擊放大...JS
- 滑鼠懸浮圖片出現文字說明效果
- H5頁面滾動阻尼效果實現H5
- JavaFx 實現水平滾動文字(跑馬燈效果)Java
- 實現報表滾動到底部翻頁效果
- OverScroll彈性滾動和慣性滾動效果的實現原理——CoordinatorLayout+Behavior
- 2020 用html jQuery實現廣告輪播圖自動切換 滾動頁面 滑鼠懸浮下標且左右切換圖片HTMLjQuery
- 直播軟體搭建,css實現多張圖片或logo左右無間隙滾動CSSGo
- 隱藏滾動條保留滾動效果
- 移動端輪播圖實現方法(dGun.js)JS
- 跟隨滑鼠移動可關閉的漂浮圖片廣告
- 手機直播原始碼,實現圖片瀑布流式滑動效果原始碼
- 如何在CSS中對映的滑鼠位置,並實現通過滑鼠移動控制頁面元素效果CSS
- 滑鼠懸浮圖片旋轉效果