react视觉差异拖动相册效果
代码语言:html
所属分类:视觉差异
代码描述:react视觉差异拖动相册效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } body { background-color: rgb(247, 247, 247); } #root { display: flex; align-items: center; justify-content: center; } #app { position: relative; width: 400px; height: 100vh; background-color: rgb(255, 255, 255); display: flex; flex-direction: column; font-family: Roboto-Regular, HelveticaNeue, Arial, sans-serif; /* align-items: center; justify-content: space-between; */ box-shadow: 0px 0px 25px -8px rgba(0,0,0,0.25); padding-left: 0px; overflow: hidden; } #card { position: absolute; width: 240px; height: 400px; background-color: rgb(255, 255, 255); border-radius: 20px; overflow: none; padding: 12px; box-shadow: 0px 27px 63px -24px rgba(0, 0, 0, 0.5); } #nav { position: relative; display: flex; flex-direction: row; } #profile { position: absolute; width: 50px; height: 50px; border-radius: 50%; right: 40px; bottom: -18px; box-shadow: 0px 0px 49px -16px rgba(0, 0, 0, 1); } #imgContainer { width: 100%; height: 100%; border-radius: 12px; background-color: rgb(235, 235, 235); overflow: hidden; } h1 { font-size: 40px; margin-left: 30px; margin-top: 45px; } #nav { margin-left: 30px; width: auto; margin-top: 45px; } #el { color: rgb(153, 153, 153); margin-right: 28px; } #user { width: 50px; height: 50px; border: 5px solid rgb(255, 255, 255); border-radius: 50%; background-image: url(http://repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90); margin-right: 22px; background-size: cover; margin-top: 43px; box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.115); } #infocontainer { background-color: rgb(255, 255, 255); width: 100%; height: 40vh; border-radius: 30px 30px 0px 0px; position: absolute; padding: 26px; z-index: 10; } #detailName { font-size: 30px; font-weight: bold; margin-bottom: 10px; } #follow { font-size: 15px; padding: 9px 44px; color: #fff; border: none; background: #000; border-radius: 3px; margin-top: 30px; margin-right: 10px; } #message { font-size: 15px; padding: 9px 44px; color: #fff; background: rgb(33, 111, 255); border: none; border-radius: 3px; margin-top: 30px; margin-right: 10px; } #detailImage { float: left; position: relative; border-radius: 6px; margin-top: 30px; margin-right: 4%; width: 46%; } #detailPro { color: #9a9a9a; font-size: 14px; letter-spacing: 1px; } #cross { width: 50px; height: 50px; border: 5px solid rgb(255, 255, 255); border-radius: 50%; position: absolute; top: 43px; right: 22px; background: #fff; z-index: 10; } .close { position: absolute; right: 4px; top: 3px; width: 32px; height: 32px; } .close:hover { opacity: 1; } .close:before, .close:after { position: absolute; left: 15px; content: " "; height: 33px; width: 2px; background-color: #333; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } </style> </head> <body translate="no"> <div id='root'></div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-spring.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-use-gesture.js"></script> <script> function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(0)) break;var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}window.CP.exitedLoop(0);return target;};return _extends.apply(this, arguments);}const { useState } = React; const { useSprings, interpolate, animated, useSpring } = ReactSpring; const { useDrag } = ReactUseGesture; const rootElement = document.getElementById("root"); const imgData = [ { name: "James Eades", detail: "Feel free to visit my website or Instagram (@jmeeades) for more shots! Please contact me if you wish to use images for prints/commercial use.", images: [ "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90"], url: "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", profile: "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" }, { name: "James Eades", detail: "Feel free to visit my website or Instagram (@jmeeades) for more shots! Please contact me if you wish to use images for prints/commercial use.", images: [ "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90"], url: "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", profile: "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" }, { name: "James Eades", detail: "Feel free to visit my website or Instagram (@jmeeades) for more shots! Please contact me if you wish to use images for prints/commercial use.", images: [ "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90"], url: "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_500,/quality,q_90", profile: "http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0