返回顶部、懒加载、自定义右键

最新推荐文章于 2024-06-26 14:58:35 发布

菲允龙歌

最新推荐文章于 2024-06-26 14:58:35 发布

阅读量114

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100678051

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

返回顶部

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #top{
            height: 2000px;
        }
        a{ position:fixed; bottom: 10px; right: 10px; display: none}
    </style>
</head>
<body id='top'>
    <span></span>
    <a href="#top" id="tp">返回顶部</a>
    <script>
        window.onscroll = function(){
           var sT = document.documentElement.scrollTop
           if(sT>500){
                tp.style.display = 'block'
           }else{
            tp.style.display = 'none'
           }
        }
    </script>
</body>

懒加载

<body>
    <!-- 懒加载
        页面没有到可视区域的时候页面的内容没有去发送这个请求
        一般就是指图片 
        <img src='' >
    -->
    <div>
    <img src="" alt="" data = 'images/1.jpg'>
    <img src="" alt="" data = 'images/2.jpg'>
    <img src="" alt="" data = 'images/3.jpg'>
    <img src="" alt="" data = 'images/4.jpg'>
   
    <img src="" alt="" data = 'images/1.jpg'>
    <img src="" alt="" data = 'images/2.jpg'>
    <img src="" alt="" data = 'images/3.jpg'>
    <img src="" alt="" data = 'images/4.jpg'>
</div>
    <script>
    window.onscroll = load;
    window.onload = load;
    function load(){
        var imgs = document.getElementsByTagName('img')
        // imgs[0].src = imgs[0].getAttribute('data')
        var cH = document.documentElement.clientHeight
        var sT = document.documentElement.scrollTop
         console.log( imgs[2].offsetTop)
        for(var i=0; i<imgs.length;i++){
           
            if( imgs[i].offsetTop<=cH+sT){
                imgs[i].src = imgs[i].getAttribute('data')
            }
        }
    }
    </script>
</body>

自定义右键

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #ul {
            border: 1px solid #000;
            width: 100px;
            position: absolute;
            display: none
        }

        #ul>li {
            text-indent: 1em;
            border-bottom: 1px solid #ccc;
            position: relative;
        }

        li:hover {
            background: #eee
        }

        li>ul {
            position: absolute;
            left: 101px;
            top: 0;
            border: 1px solid #000;
            width: 100px;
            display: none
        }
    </style>
</head>

<body>
    <ul id="ul">
        <li>返回</li>
        <li id="li1">新建
            <ul id="ul1">
                <li>
                    html
                </li>
                <li>
                    css
                </li>
                <li>
                    js
                </li>
            </ul>
        </li>
        <li id="li2">复制
            <ul id="ul2">
                <li>
                    html
                </li>
                <li>
                    css
                </li>
                <li>
                    js
                </li>
            </ul>
        </li>
        <li>粘贴</li>
    </ul>

    <script>
        document.oncontextmenu = function (ev) {

            var x = ev.pageX;
            var y = ev.pageY;
            ul.style.display = 'block';
            ul.style.left = x + 'px';
            ul.style.top = y + 'px';
            ev.preventDefault();
        }
        var li = document.getElementsByTagName('li')[0];
        li.addEventListener('click', function () {
            ul.style.display = 'none'
        })
        li1.onmouseover = function () {
            // ul1.style.display = 'block'
            over(ul1)
        }
        li1.onmouseout = function () {
            out(ul1)
            // ul1.style.display = 'none'
        }

        li2.onmouseover = function () {
            over(ul2)
            // ul2.style.display = 'block'
        }
        li2.onmouseout = function () {
            // ul2.style.display = 'none'
            out(ul2)
        }
        function over(obj) {
            obj.style.display = 'block'
        }
        function out(obj) {
            obj.style.display = 'none'
        }
        document.onclick = function () {
            ul.style.display = 'none'
        }
    </script>
</body>

菲允龙歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
返回顶部、懒加载、自定义右键

返回顶部<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ...
复制链接

扫一扫

专栏目录