-
实现鼠标拖拽案例
HTML代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <div style=" 100px; height: 100px; position:absolute;left:0px;top:0px; background-color: red"> </div> <script> var div = document.getElementsByTagName('div')[0];//获取 var x = ""; var y = ""; div.onmousedown = function (e)//鼠标点击触发 { x =e.pageX-parseInt(div.style.left); y = e.pageY - parseInt(div.style.top); //console.log(x+","+y); document.onmousemove = function (e) { var event = e || window.event;//兼容 div.style.left = event.pageX-x + "px"; div.style.top = event.pageY - y + "px"; } } document.onmouseup = function () { document.onmousemove = null; } </script> </body> </html>
-
加载动画
HTML代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="loading.css" rel="stylesheet" /> <script src="jquery-1.7.1.min.js"></script> </head> <body> <div class="text-font"> <h2>jun wxj</h2> <h3>无殇</h3> </div> <div class="animal"> <div class="eye"> <div class="eyeball"> </div> </div> <div class="mouth"> </div> </div> <div class="animal other"> <div class="eye other"> <div class="eyeball other"> </div> </div> <div class="mouth"> </div> </div> <div class="page"> <div class="animal box"> <div class="eye"> <div class="eyeball"> </div> </div> <div class="mouth"> </div> </div> <div class="bar"> <div class="inbar"> </div> </div> <div class="font"> </div> </div> <script> var dom = $(".inbar"); var set; var count = 0; set = setInterval(function () { dom.css("width", count + "%"); $(".font").text(count + "%"); count++; if (count > 100) { clearInterval(set); $(".page").addClass("sucess"); } }, 20); </script> </body> </html>
CSS代码
/*取消边框*/ * { padding: 0; margin: 0; } h2 { font-size:60px; font-family:'华文行楷'; color:#fff; margin:7px; } h3 { font-size:45px; font-family:'华文行楷'; color:#fff; } html, body { 100%; height: 100%; background-color: #988a8a; display: flex; /*(设置弹性盒子)*/ justify-content: center; /*设置水平居中对齐*/ align-items: center; /*设置垂直居中*/ } .animal { position: relative; 120px; height: 120px; background-color: #ffd800; border-radius: 20px; margin: 10px; display: flex; /*(设置弹性盒子)*/ flex-direction: column; /*弹性盒子中按照列去对齐*/ justify-content: center; /*设置水平居中对齐*/ align-items: center; /*设置垂直居中*/ box-shadow: 0 18px 5px rgb(9, 61, 50); animation: jump 1s infinite alternate; /*插入动画 动画元素 执行时间 循环执行 上下都有动画*/ } .animal.other { background-color: blue; animation-delay: 0.5s; /*延迟动画加载*/ } .eye { 40%; height: 40%; border-radius: 50%; background-color: #fff; display: flex; /*(设置弹性盒子)*/ justify-content: center; /*设置水平居中对齐*/ align-items: center; /*设置垂直居中*/ margin-top: -30px; } .eyeball { 40%; height: 40%; border-radius: 50%; background-color: black; animation: trans 0.8s infinite alternate; } /*伪元素（向元素前面插入内容，向元素后面插入内容）*/ .animal::before, .animal::after { position: absolute; /*绝对定位让它在最上面*/ content: ''; display: block; height: 7px; 18%; background-color: #c3c4d9; border-radius: 20px; top: -12px; } .animal::before { transform: translateX(25%) rotate(-45deg); } .animal::after { transform: translateX(-25%) rotate(45deg); } /*关键帧 就是做成动画*/ @keyframes jump { 40% { top: 0px; box-shadow: 0 18px 5px rgb(9, 61, 50); } 100% { top: -100px; box-shadow: 0 130px 5px rgb(9, 61, 50); } } /*控制眼珠的平移*/ @keyframes trans { 0%,10% { transform: translate(50%); } 90%,100% { transform: translate(-50%); } } .page { 100%; height: 100%; position: absolute; left: 0px; top: 0px; background-color: cyan; display: flex; /*(设置弹性盒子)*/ justify-content: center; /*设置水平居中对齐*/ align-items: center; /*设置垂直居中*/ flex-direction: column; transition:opacity 0.9s;/*指定动画执行时间0.6s*/ } .bar { 40%; height: 10px; border-radius: 18px; background-color: #fff; margin: 20px; } .inbar { height:100%; background-color:#ffd800; } /*加上sucess是标记为执行玩了之后*/ .page.sucess { opacity:0; } /*当精度条执行完了之后加个小动画*/ .page.sucess .box { transition:0.6s; transform:scale(0.1) rotate(360deg); }