js特效4（3个特效）

最新推荐文章于 2024-06-15 21:20:00 发布

甜甜今天学了吗

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量156

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/dawanhjiao/article/details/104988731

版权

1.手表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手表</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            position: relative;/*相对定位*/
            width: 600px;
            height: 600px;
            background: url("image/clock.jpg") no-repeat;
            margin: 20px auto;
        }
        #hour, #min, #sec{
            position: absolute;
            left: 50%;
            top: 0;
            width: 30px;
            height: 600px;
            margin-left: -15px;
        }
        #hour{
            background: url("image/hour.png") no-repeat center center;

        }
        #min{
             background: url("image/minute.png") no-repeat center center;
         }
        #sec{
            background: url("image/second.png") no-repeat center center;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
</div>
<script>
    window.onload = function (ev) {
        var hour = document.getElementById('hour');
        var min = document.getElementById('min');
        var sec = document.getElementById('sec');
        setInterval(function (ev1) {
            var data = new Date();
            var allmill = data.getMilliseconds();//当前的毫秒
            var se = data.getSeconds() + allmill / 1000;//秒+毫秒变成的秒
            var mi = data.getMinutes() + se / 60;
            var hou = data.getHours() + mi /60;
            //做旋转
            hour.style.transform = 'rotate(' + hou * 30 + 'deg)';//一小时30度
            min.style.transform = 'rotate(' + mi * 6 + 'deg)';//一分钟走6度
            sec.style.transform = 'rotate(' + se * 6 + 'deg)';//一秒走6度
        },10);
    }
</script>
</body>
</html>

2.定时器累加

用事件控制进入定时器时，可能会发生定时器累加，所以一定要遵循“先清，后设”。
先清除定时器再设置定时器。
清除定时器clearInterval(定时器名字);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: red"> </div>
<script>
    window.onload = function (ev) {
        var box = document.getElementById('box');
        var num = 0, ding = null;
        box.addEventListener('mouseover',function (ev1) {
            clearInterval(ding);
            ding = setInterval(function () {
                num ++;
                console.log(num);
            },1000)
        })
    }
</script>
</body>
</html

3.长图滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长图滚动</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background-color: black;
        }
        #box{
            width: 750px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        #prc{
            position: absolute;
            left: 0;
            top: 0;
        }
        #top,#bottom{
            width: 100%;
            height: 50%;
            position: absolute;
            left: 0;
            cursor: pointer;
        }
        #top{
            top:0;
            /*background-color: #00CCFF;*/
        }
        #bottom{
            bottom: 0;
            /*background-color: #00FF33;*/
        }
    </style>
</head>
<body>
<div id="box">
    <img src="image/timg.jpg" id="prc">
    <span id="top"></span>
    <span id="bottom"></span>
</div>
<script>
    window.onload = function (ev) {
        var box = f('box');
        var prc = f('prc');
        var top = f('top');
        var bottom = f('bottom');
        var ding ,long = 0;//定时器和距离
        //鼠标进入
        //向上
        top.onmouseover = function (ev1) {
            clearInterval(ding);
            ding = setInterval(function () {
                long -=10;
                if (long > -2466){//图片长2866,box宽度是400
                    prc.style.top = long + 'px';
                }
                else {
                    clearInterval(ding);
                }

            },40)
        };
        //向下
        bottom.onmouseover = function (ev2) {
            clearInterval(ding);
            ding = setInterval(function () {
                long +=10;
                if (long < 0){//向下top最大为0
                    prc.style.top = long + 'px';
                }
                else {
                    clearInterval(ding);
                }

            },40)
        };
        //鼠标离开
        box.onmouseout = function () {
            clearInterval(ding);
        }
    };
    function f(id) {
        return document.getElementById(id);
    }
</script>
</body>
</html>

甜甜今天学了吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js特效4（3个特效）

1.手表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手表</title> <style type="text/css"> *{ margin: 0; ...
复制链接

扫一扫