前端JavaScripts基础知识点

最新推荐文章于 2021-02-04 09:53:09 发布

天主极乐大帝

最新推荐文章于 2021-02-04 09:53:09 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42218868/article/details/88901996

版权

1放大镜
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        .smallBox {
            position: relative;
            width: 400px;
            height: 250px;
            margin-left: 100px;
            margin-top: 100px;
            float: left;
        }
        .smallBox img {
            width: 400px;

        }
        .bigBox {
            position: relative;
            width: 800px;
            height: 500px;
            margin-left: 50px;
            margin-top: 100px;
            float: left;
            border: 1px solid #ccc ;
            overflow: hidden;
        }
        .move {
            position: absolute;
            left:0;
            top:0;
            width: 120px;
            height: 120px;
            background-color: rgba(234,23,56,0.4);
        }
        #bigPic {
            position: absolute;
            left: 0;
            top:0;
        }

    </style>
</head>
<body>
<!--小盒子-->
<div class="smallBox">
    <img src="images/2-small.jpg" alt="" id="smallPic">
    <div class="move"></div>
</div>
<div class="bigBox">
    <img src="images/2-big.jpg" alt="" id="bigPic">
</div>

<script>

 window.onload = function () {
     /*
     * 1:阴影块随着鼠标动---》获取鼠标位置
     *
     * */

     console.log(document.body)
     var img = document.getElementsByClassName('move')[0]
     var bigBox = document.getElementById('bigPic')
     console.log(img.offsetWidth);
     document.function(e){
     }
     document.onmousemove = function (e) {
         //获取鼠标坐标  事件对象 e 保存着事件的具体信息
         img.style.left = e.clientX-100 -img.offsetWidth/2+'px' ;
         img.style.top = e.clientY-100-img.offsetHeight/2+'px';
         // alert(img.style.left,img.style.top)
         if (parseInt(img.style.left)<0){
             img.style.left=0
         }
         if (parseInt(img.style.left)>280){
             img.style.left=280+'px'
         }
         if (parseInt(img.style.top

最低0.47元/天解锁文章

天主极乐大帝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端JavaScripts基础知识点

1放大镜<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$美少女战士$</title> <style> .smallBox { position: relat...
复制链接

扫一扫