网页天幕代码！从css、html到js的完美实现（自执行函数加原型的完美应用）！！

最新推荐文章于 2022-08-01 00:30:43 发布

Awen_liang1002

最新推荐文章于 2022-08-01 00:30:43 发布

阅读量438

点赞数 1

分类专栏： javaScript 文章标签：布局前端天幕

本文链接：https://blog.csdn.net/weixin_37615202/article/details/74474662

版权

javaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

此文章仅仅提供学习，如果转载请注明出处！！！如果复用~~~点个赞就好了！！！

===========================华丽的分割前=============================

首先学习一下一个IIFE和prototype的小代码！

	function People(name) {
		this.name = name;
		//对象方法
		this.Introduce = function(){
			console.log("My name is " + this.name);
		};
	}
	//类方法
	People.Run = function(){
		console.log("I can run");
	}
	//原型方法
	People.prototype.IntroduceChinese = function() {
		console.log("我的名字是" + this.name);
	};

//测试
var p1 = new People("tom");
p1.Introduce();
People.Run();
p1.IntroduceChinese();

效果如下图

===============================正儿八经的干货来了=============================

以前是全部代码，不啰嗦。。。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天幕</title>
</head>
<body>
  <div id="sss" style="cursor:pointer;width:1000px;height:232px;position:absolute;top:-232px;left:50%;margin-left:-500px;z-index:11001;overflow:hidden;background-color: red">
      <a href="('大图片')">
        <img src="http://attach2.scimg.cn/ycb/201012/08/897499a0ce478c3aaf54bc106c161813.jpg" />
      </a>
      <a id="sssClose" href="javascript:void(0)" style="position: absolute; top: 5px; right: 5px; color: #fff;">关闭</a>
    </div>
    <div id="ssstip" style="width:120px;height:90px;position:absolute;z-index:11001;left:50%;margin-left:508px;top:300px;overflow:hidden;display:none;background-color: red">
      <a href="(小图片)">
        <img src="http://i2.tdimg.com/039/035/285/p.jpg" />
      </a>
      <a id="ssstipPlay" href="javascript:void(0)" style="padding:0 5px;height:20px;line-height:20px;display:inline-block;position:absolute;z-index:2;bottom:0;left:0;color:#fff;font-size:12px;text-decoration:none;display:none;">
        重播
      </a>
      <a id="ssstipClose" href="javascript:void(0)" style="padding:0 5px;height:20px;line-height:20px;display:inline-block;position:absolute;z-index:2;bottom:0;right:0;color:#fff;font-size:12px;text-decoration:none;display:none;">
        关闭
      </a>
      <div id="ssstipMask" style="width:100%;height:20px;position:absolute;z-index:1;bottom:0;left:0;background:#000;filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7;zoom:1;visibility:hidden;">
      </div>
    </div>
<script type="text/javascript">
(function() {
  function sss() {
    var that = this;
    that.sss = document.getElementById('sss');
    that.ssstip = document.getElementById('ssstip');
    that.playbtn = document.getElementById('ssstipPlay');
    that.closebtn = document.getElementById('ssstipClose');
    that.sssClose = document.getElementById('sssClose');
    that.tipmask = document.getElementById('ssstipMask');
    if (that.sss == null || that.playbtn == null) {
      return;
    }
    that.isAnimated = false;
    that.init();
    that.play();
  }
  sss.prototype = {
    init: function() {
      var that = this;
      that.playbtn.onclick = function() {
        that.play();
        that.ssstip.style.display = 'none';
        return false;
      };
      that.closebtn.onclick = function() {
        that.ssstip.style.display = 'none';
        return false;
      };
      that.sssClose.onclick = function() {
        that.play(1);
        return false;
      };
      that.ssstip.onmouseover = function() {
        that.playbtn.style.display = 'inline-block';
        that.closebtn.style.display = 'inline-block';
        that.tipmask.style.visibility = 'visible';
      };
      that.ssstip.onmouseout = function() {
        that.playbtn.style.display = 'none';
        that.closebtn.style.display = 'none';
        that.tipmask.style.visibility = 'hidden';
      };
    },
    animate: function(elem, css, options, fun) {
      var that = this;
      setTimeout(function() {
        elem.stopAnimate = false;
        elem.isAnimate = true;
        var rawDate = new Date();
        var style = elem.style;
        for (var key in css) {
          var toValue = css[key];
          var rawValue = that.css(elem, key);
          var spanValue = toValue - rawValue;
          var speed = options.speed;
          (function run() {
            var newDate = new Date();
            var newValue = that.sine(newDate - rawDate, rawValue, spanValue, speed);
            if (key === 'opacity') {
              that.opacity(elem, newValue);
            } else {
              style[key] = newValue + 'px';
            }
            if ((spanValue >= 0 && newValue >= toValue) || (spanValue < 0 && newValue <= toValue)) {
              elem.isAnimate = false;
              fun && fun();
              return;
            }
            if (elem.stopAnimate === true || newDate - rawDate >= options.speed) {
              if (key === 'opacity') {
                that.opacity(elem, toValue);
              } else {
                style[key] = toValue + 'px';
              }
              elem.isAnimate = false;
              fun && fun();
              return;
            }
            setTimeout(run, 13);
          })();
          return;
        }
      }, 13);
    },
    sine: function(t, b, c, d) {
      return c * Math.sin(t / d * (Math.PI / 2)) + b;
    },
    css: function(elem, cssName) {
      var computedStyle = window.getComputedStyle ? window.getComputedStyle(elem) : elem.currentStyle;
      var value;
      var ropacity = /opacity=([^)]*)/;
      if (cssName === 'opacity' && computedStyle.opacity == null) {
        value = ropacity.test(computedStyle.filter) ? (0.01 * parseFloat(RegExp.$1)) : 0;
      } else {
        value = computedStyle[cssName];
      }
      return parseFloat(value === '' || value === 'auto' ? 0 : value);
    },
    opacity: function(elem, value) {
      if (elem.style.opacity != null) {
        elem.style.opacity = value;
      } else {
        elem.style.filter = 'alpha(opacity=' + value * 100 + ')';
      }
    },
    play: function(speeds) {
      var that = this;
      if (that.timeout) {
        clearTimeout(that.timeout);
      }
      if (!that.isAnimated) {
        that.animate(that.sss, {
          top: 0
        }, {
          speed: speeds || 300
        }, function() {
        that.timeout = setTimeout(function() {
            that.animate(that.sss, {
              opacity: 0
            }, {
              speed: speeds || 300
            }, function() {
              that.ssstip.style.display = '';
              that.sss.style.top = '-232px';
              that.opacity(that.sss, 1);
            });
          }, speeds || 5000);
        });
      }
    }
  };
  new sss();
}());
</script>
</body>
</html>

开网页的效果：

五秒过后，大图消失，小图出现，鼠标移上去可以选择重播和彻底关闭！