console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            background-color: antiquewhite;
            position: absolute;
           background-image: url("https://top-mvp-img.xhscdn.com/miniimg/1000g1i81etmd8is4o0003oqd6mc015uq3uh1hcg");
           background-repeat: no-repeat;
           background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <button>重置</button>
    <div><img style=" width: 100%; visibility: hidden;" src="https://top-mvp-img.xhscdn.com/miniimg/1000g1i81etmd8is4o0003oqd6mc015uq3uh1hcg" alt=""></div>
</body>
<script>
    var button =document.querySelector('button')
    button.onclick=function(){
        divMove.style.top=40+'px'
        divMove.style.left=10+'px'
        scale=1
        divMove.style.transform=`scale(${scale})`
        
    }
    
    var divMove = document.querySelector('div')
    divMove.onmousedown = function (e) {
        window.onmousemove = function (event) {
            divMove.style.left=event.clientX-e.target.offsetWidth/2+'px'
            divMove.style.top=event.clientY-e.target.offsetHeight/2+'px'
        }
    }
    divMove.onmouseup=function(){
        window.onmousemove =null
    }
    let  scale = 1
    divMove.onwheel=function(e){
       
        if(e.wheelDelta>0){
            scale+=0.05
            divMove.style.transform=`scale(${scale})`
        }else{
            scale-=0.05
            divMove.style.transform=`scale(${scale})`
        }
    }
</script>

</html>

/* 全局样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f9ebea;
    color: #444444;
}

header, main, footer {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: #cfb6b6;
}

h1 {
    font-size: 48px;
    text-align: center;
    margin-bottom: 20px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

nav li {
    margin: 0 10px;
}

nav a {
    text-decoration: none;
    color: #ffffff;
    font-size: 24px;
    transition: color 0.3s ease-in-out;
}

nav a:hover {
    color: #a05858;
}

main h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.partner-name {
    font-weight: bold;
}

footer {
    text-align: center;
    background-color: #cfb6b6;
}

a {
  color: #808080;
  text-decoration: none;
  font-family: "Courier New", Times, serif;
  font-size: 24px;
}

a:hover {
  color: #c0c0c0;
}


/* 响应式布局 */
@media (max-width: 600px) {
    h1 {
        font-size: 36px;
    }
    
    nav a {
        font-size: 20px;
    }
    
    main h2 {
        font-size: 28px;
    }
}

本项目引用的自定义外部资源

jquery.js