前端案例

  1. 实现鼠标拖拽案例

    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="width: 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>

 

 

  1. 加载动画

    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 {

width: 100%;

height: 100%;

background-color: #988a8a;

display: flex; /*(设置弹性盒子)*/

justify-content: center; /*设置水平居中对齐*/

align-items: center; /*设置垂直居中*/

}

 

.animal {

position: relative;

width: 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 {

width: 40%;

height: 40%;

border-radius: 50%;

background-color: #fff;

display: flex; /*(设置弹性盒子)*/

justify-content: center; /*设置水平居中对齐*/

align-items: center; /*设置垂直居中*/

margin-top: -30px;

}

 

.eyeball {

width: 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;

width: 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 {

width: 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 {

width: 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);

}

 

posted @ 2019-12-21 13:33  落幕无痕  阅读(308)  评论(0)  编辑  收藏  举报