Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Hover Me
Drag Me
css
container { position:relative; } .rectangle-1 { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#4CAF50; width:180px; height:150px; border-radius:5px; transition:0.3s all ease; color:#fff; text-align:center; line-height:150px; font-size:25px; } .rectangle-1.collide { background:#EF5350; } .rectangle-1:after { content:":-)"; position:absolute; bottom:-50px; left:50%; transform:translateX(-50%); } .rectangle-1.collide:after { content:":-("; } .rectangle-2 { position:absolute; background:#F5B041; width:100px; height:100px; border-radius:5px; z-index:10; cursor:move; transition:0.5s box-shadow ease,0.5s transform ease; transform:translate(0,0); top:40%; left:30%; text-align:center; line-height:100px; font-size:17px; } .rectangle-2.onDrag { box-shadow:5px 5px 25px 0px rgba(0,0,0,0.2); transform:translate(-3px,-3px); } html,body { user-select:none; width:100%; height:100%; font-family:'Roboto',sans-serif; } body { margin:0; background:-webkit-gradient(left top,right bottom,color-stop(0%,rgba(239,247,255,1)),color-stop(15%,rgba(239,247,255,1)),color-stop(100%,rgba(180,188,221,1))); background:linear-gradient(135deg,rgba(239,247,255,1) 0%,rgba(239,247,255,1) 15%,rgba(180,188,221,1) 100%); background:-webkit-linear-gradient(-45deg,rgba(239,247,255,1) 0%,rgba(239,247,255,1) 15%,rgba(180,188,221,1) 100%); background:-moz-linear-gradient(-45deg,rgba(239,247,255,1) 0%,rgba(239,247,255,1) 15%,rgba(180,188,221,1) 100%); } .projHeader { position:absolute; left:2%; top:10px; } .primaryText { font-weight:300; font-size:40px; text-shadow:2px 2px 1px rgba(0,0,0,0.3); } .secondaryText { font-weight:300; font-size:23px; } .createdBy { font-weight:300; font-size:17px; margin-top:10px; } .createdBy a { color:#000; text-decoration:none; border-bottom:1px solid #000; } .footer { position:absolute; right:8%; top:50%; transform:translateY(-50%); border-left:1px solid rgba(0,0,0,0.5); padding-left:15px; } .footer a { display:inline-block; font-size:17px; padding:7px 0; color:#000; text-decoration:none; } @media only screen and (max-width:1200px) { .projHeader { position:static; transform:translate(0); } .primaryText { font-weight:300; font-size:30px; text-align:center; margin-top:10px; } .secondaryText { font-weight:300; text-align:center; font-size:20px; } .createdBy { font-weight:300; text-align:center; font-size:17px; margin-top:5px; } .createdBy a { color:#000; text-decoration:none; border-bottom:1px solid #000; } .footer { position:fixed; bottom:0; right:auto; top:auto; left:0; border-top:1px solid rgba(0,0,0,0.5); width:100%; transform:translate(0); border:none; padding:0; text-align:center; border-top:1px solid #bfc7e4; } .footer div { display:inline-block; } .footer a { display:inline-block; font-size:17px; padding:7px 0; color:#000; text-decoration:none; margin:0px 20px; } }
JavaScript
var dragMe; window.onload = function() { var rect = document.getElementById("rect"); dragMe = document.getElementById("dragMe"); initDrag({ element: dragMe, start: function() { addShadow(); }, drag: function() { isCollapsed(dragMe, rect); }, stop: function() { removeShadow(); } }); }; function isCollapsed(dragMe, rect) { var object_1 = dragMe.getBoundingClientRect(); var object_2 = rect.getBoundingClientRect(); if ( object_1.left < object_2.left + object_2.width && object_1.left + object_1.width > object_2.left && object_1.top < object_2.top + object_2.height && object_1.top + object_1.height > object_2.top ) { rect.classList.add("collide"); } else { rect.classList.remove("collide"); } } function addShadow() { dragMe.classList.add("onDrag"); } function removeShadow() { dragMe.classList.remove("onDrag"); } function initDrag(options) { var element = options.element; var mousedown, mouseup, mousemove, dragStart, initX, initY, offsetLeft, offsetTop; function mouseMove(ev) { if (dragStart) { var newX = offsetLeft + (ev.pageX - initX); var newY = offsetTop + (ev.pageY - initY); element.style.top = newY + "px"; element.style.left = newX + "px"; options.drag.call(); } } function mouseUp(ev) { dragStart = false; document.removeEventListener("mousemove", mouseMove, false); document.removeEventListener("mouseup", mouseUp, false); options.stop.call(); } function mouseDown(ev) { initX = ev.pageX; initY = ev.pageY; dragStart = true; offsetLeft = element.offsetLeft; offsetTop = element.offsetTop; document.addEventListener( "mousemove", function(ev) { mouseMove(ev); }, false ); document.addEventListener( "mouseup", function(ev) { mouseUp(ev); }, false ); options.start.call(); } element.addEventListener( "mousedown", function(ev) { mouseDown(ev); }, false ); }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>碰撞检测-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号