zoukankan      html  css  js  c++  java
  • 前端案例

    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=" 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 {
    
     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);
    
    }
    
     
  • 相关阅读:
    HDU 1069 Monkey and Banana
    HDU 1029 Ignatius and the Princess IV
    HDU 1024 Max Sum Plus Plus
    Gym100923H Por Costel and the Match
    Codeforces 682C Alyona and the Tree
    Codeforces 449B Jzzhu and Cities
    Codeforces (ccpc-wannafly camp day2) L. Por Costel and the Semipalindromes
    Codeforces 598D (ccpc-wannafly camp day1) Igor In the Museum
    Codeforces 1167c(ccpc wannafly camp day1) News Distribution 并查集模板
    快乐数问题
  • 原文地址:https://www.cnblogs.com/xiaojunwu/p/12708476.html
Copyright © 2011-2022 走看看