BOM、拖拽、点击查看详细

最新推荐文章于 2025-06-08 21:05:38 发布

[Augenstern]

最新推荐文章于 2025-06-08 21:05:38 发布

阅读量116

点赞数

文章标签： javascript html5 html

本文链接：https://blog.youkuaiyun.com/weixin_44627935/article/details/125106583

版权

1、window是浏览器留给js的窗口
2、全局变量都是window的属性，全局变量都是window的方法
3、location 地址栏
function to(){
/* a标签跳转的原理 /
location.href = ‘lurenjia.html’;
}
4、navigator 浏览器状态
console.log(navigator,navigator.userAgent);
5、判断是否是移动端
function isMobile(){
/ 移动端操作系统*/
var mobiles = [“iPhone”,“iPad”,“iPod”,“Sybian”,“BlueBarry”];
for(var i=0; i<mobiles.length; i++){
if(navigator.userAgent.indexOf(mobiles[i]) !==-1){
return true;
}
}
return false;
}
6、鼠标按下事件，获取起点位置信息
drag.onmousedown = function(e1){
  var x1 = e1.clientX;
  var y1 = e1.clientY;
  var l1 = this.offsetLeft;
  var t1 = this.offsetTop;
}
7、边界处理
l2 = l2<0 ? 0 : (l2>window.innerWidth-drag.offsetWidth ? window.innerWidth-drag.offsetWidth : l2);
drag.style.left = l2 + ‘px’;
drag.style.top = t2 + ‘px’;

拖拽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .drag{
            width: 400px;
            height: 300px;
            background-color: tomato;
            background-image: url(img/5.jpg);
            background-size: cover;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="drag"></div>
</body>
<script>
    var drag = document.querySelector(".drag");

    // 鼠标按下事件，获取起点位置信息
    drag.onmousedown = function(e1) {
        var x1 = e1.clientX;
        var y1 = e1.clientY;
        var l1 = this.offsetLeft;
        var t1 = this.offsetTop;

        // 鼠标移动时间，计算差值，drag重新定位
        window.onmousemove = function(e2) {  
            var x2 = e2.clientX;
            var y2 = e2.clientY;     
            var l2 = l1 + (x2 - x1);
            var t2 = t1 + (y2 - y1);
            // 边界处理
            l2 = l2<0 ? 0 : (l2>window.innerWidth-drag.offsetWidth ? window.innerWidth-drag.offsetWidth : l2);
            drag.style.left = l2 + 'px';
            drag.style.top = t2 + 'px';   
        }
    }

    // 当鼠标抬起时，去掉mousemove事件
    drag.onmouseup = function() {
        window.onmousemove = null;
    }
</script>
</html>

点击查看详细：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击查看详细</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bg, .wrap{
            position: absolute;
            left: 100px;
            top: 100px;
            width: 600px;
            height: 300px;
            /* margin: 0 auto; */
            /* background-color: pink; */
            background-size: cover;
            background-position: center center;
        }
        .bg{
            z-index: -1;
            background-image: url(img/5.jpg);
            box-shadow: 0 0 3px #333;
            filter: blur(10px);
        }
        .click{
            background-image: url(img/5.jpg);
            -webkit-mask-image:-webkit-radial-gradient(#0f0 70%, transparent 70%);
            -webkit-mask-size:80px 80px;
            -webkit-mask-repeat:no-repeat;
        }
        div{
            /* background-image: -webkit-radial-gradient(#0f0 70%, transparent 70%);
            background-size: 80px 80px;
            background-repeat: no-repeat; */
        }
    </style>
</head>
<body>
    <div class="bg"></div>
    <div class="wrap"></div>
</body>
<script>
    var dWrap = document.querySelector(".wrap");

    dWrap.onmousedown = function() {
        this.className = "wrap click";
        window.onmousemove = function(e) {
            var x = e.clientX - dWrap.offsetLeft - 40;
            var y = e.clientY - dWrap.offsetTop - 40;
            dWrap.style.webkitMaskPosition =`${x}px ${y}px`;
        }
    }

    dWrap.onmouseup = function() {
        this.className = "wrap";
        window.onmousemove = null;
    }

    dWrap.onmouseleave = function() {     
        this.className = "wrap";
        window.onmousemove = null;
    }
</script>
</html>