HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果演示：?文末獲取源碼
代碼目錄：
主要代碼實(shí)現(xiàn)：
HTML代碼 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Document</title> </head><style type="text/css">* {margin: 0;padding: 0;}.pic {width: 120px;height: 180px;border: 1px red solid;margin: 150px auto 0;position: relative;/*transform 旋轉(zhuǎn)元素*/transform-style: preserve-3d;transform: perspective(800px) rotateX(-10deg) rotateY(0deg);}body {background-color: black;overflow: hidden;}.pic img {position: absolute;width: 100%;height: 100%;border-radius: 5px;box-shadow: 0px 0px 10px #fff;/*倒影的設(shè)置*/-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);}.pic p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(255, 255, 255, .5), rgba(0, 0, 0, 0));position: absolute;top: 100%;left: 50%;margin-top: -600px;margin-left: -600px;border-radius: 600px;transform: rotateX(90deg);} </style><body><div class="pic"><img src="img/1.jpg" /><img src="img/2.jpg" /><img src="img/3.jpg" /><img src="img/4.jpg" /><img src="img/5.jpg" /><img src="img/6.jpg" /><img src="img/7.jpg" /><img src="img/8.jpg" /><img src="img/9.jpg" /><img src="img/10.jpg" /><img src="img/11.jpg" /><p></p></div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function() {var imgL = $(".pic img").size();var deg = 360 / imgL;var roY = 0,roX = -10;var xN = 0,yN = 0;var play = null;$(".pic img").each(function(i) {$(this).css({<!---translateZ 定義2d旋轉(zhuǎn)沿著z軸->"transform": "rotateY(" + i * deg + "deg) translateZ(300px)"});<!--防止圖片被拖拽-->$(this).attr('ondragstart', 'return false');});$(document).mousedown(function(ev) {var x_ = ev.clientX;var y_ = ev.clientY;clearInterval(play);console.log('我按下了');$(this).bind('mousemove', function(ev) {/*獲取當(dāng)前鼠標(biāo)的坐標(biāo)*/var x = ev.clientX;var y = ev.clientY;/*兩次坐標(biāo)之間的距離*/xN = x - x_;yN = y - y_;roY += xN * 0.2;roX -= yN * 0.1;console.log('移動');//$('body').append('<div style="width:5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');$('.pic').css({transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'});/*之前的鼠標(biāo)坐標(biāo)*/x_ = ev.clientX;y_ = ev.clientY;});}).mouseup(function() {$(this).unbind('mousemove');var play = setInterval(function() {xN *= 0.95;yN *= 0.95if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {clearInterval(play);}roY += xN * 0.2;roX -= yN * 0.1;$('.pic').css({transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'});}, 30);});});</script></body></html>上面的圖片文件和js文件需要引入?
源碼獲取
查看博主主頁或下方鏈接獲取
精彩推薦更新中：
HTML5大作業(yè)實(shí)戰(zhàn)100套
??打卡 文章 更新?43??/? 100天
大家可以點(diǎn)贊、收藏、關(guān)注、評論我啦 、需要完整文件或技術(shù)資料點(diǎn)擊下方微信獲取~！
總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux安装服务程序,将 Go 程序安
- 下一篇： ES迁mysql_使用kafka连接器迁