利用js模仿360开机效果


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style>

    .box{

      width: 322px;

      position: fixed;

      bottom:0;

      right:0;

    }

    span{

      position: absolute;

      top:0;

      right:0;

      width:30px;

      height: 20px;

      cursor: pointer;

    }

    .box img{

      vertical-align: top;

    }

  </style>

  <script type="text/javascript" src="函数封装.js"></script>

  <script type="text/javascript">

    function $(id){

      return document.getElementById(id);

    }

    window.onload = function(){

      var span = document.getElementsByTagName('span')[0];

      var box = $('box');

      var bottom = $('bt');

      var top = $('hd');

      span.onclick = function(){

        var json = {"height": 0};

        animate(bottom,json,20,function(){

        animate(box,{"width":0},20);

        });

      }

    }

  </script>

</head>

<body>

<div id="box">

  <span></span>

  <div id="hd">

    <img src="images/t.jpg" alt=""/>

  </div>

  <div id="bt">

    <img src="images/b.jpg" alt=""/>

  </div>

</div>

</body>

</html>

效果如下:

f533d46372b21d2c4b5fa96a6b11e65.png

相关教程推荐:js教程

以上就是利用js模仿360开机效果的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

vue中computed和watch的用法及区别

实例汇总js call()及apply()的方法使用

js前要学什么

手把手教你如何实现前端的吸顶效果

解析js on及addeventlistener原理用法的区别

如何判断网页中图片加载成功或者失败?

js 编码 5 个不良习惯,如何避免?

js怎么替换所有指定字符串

jquery里面能不能写php方法?

网页代码中js和css指的是什么

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...