JavaScript 05

最新推荐文章于 2023-05-10 01:09:09 发布

颖涛

最新推荐文章于 2023-05-10 01:09:09 发布

阅读量54

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/m0_67333901/article/details/123302212

版权

1、边框的添加：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            border: 10px solid green;
            box-shadow: 0px 0px 10px yellow;
        }
    </style>
</head>
<body>
<img id="m1" src="img/1.gif" alt="">
<img id="m2" src="img/2.gif" alt="">
<img id="m3" src="img/3.gif" alt="">
<p>
    <button onclick="fn1()">点我添加边框</button>
    <button onclick="fn2()">点我添加边框</button>
    <button onclick="fn3()">点我添加边框</button>
</p>
<script>
    function fn1() {
        m1.style.border="5px solid black"
        m1.style.width="40px"
        m1.style.opacity=.5
    }

    function fn2(){
        m2.setAttribute("class","a")
    }
    function fn3(){
        m3.className="a"
    }
</script>
</body>
</html>

2、页面的滑动模式：3

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px solid black;
            position: absolute;
            right: 20px;
            top: 40px;
            transition: .1s;
        }
    </style>
</head>
<body>
<div id="ad">
    <button onclick="ad.style.display='none'">x</button>
    <br>
    <img src="img/4.gif" alt="">
</div>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<p>淘宝，逃匿所爱</p>
<script>
    window.onscroll=()=> {
        ad.style.top=40+document.documentElement.scrollTop+"px"
    }
</script>
</body>
</html>

今天就到这里

颖涛

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 05

1、边框的添加：<head> <meta charset="UTF-8"> <title>Title</title> <style> .a{ border: 10px solid green; box-shadow: 0px 0px 10px yellow; } </style></head><bo
复制链接

扫一扫