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

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

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

首先学习一下一个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>

开网页的效果：

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

喜欢的童鞋点个赞可否？

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

简单网页制作代码 HTML+CSS+JavaScript香港美食(8页)
文章目录 一.网站题目 二.网站描述 三.网站介绍 四.网站效果 五. 代码实现  oHTML结构代码 oCSS样式代码 六. 如何让学习不再盲目一.网站题目> 美食网页介绍.甜 ...
js 和jQuery（自动执行函数）立即执行函数和页面加载完后执行函数写法
js 立即执行函数的写法. js 立即执行函数只能用于匿名函数,如果声明了函数名是不可以用立即执行的,通常在函数表达式后加一对小括号()用于立即执行如果想让函数不被调用的情况下,立即自动执行,需要在 ...
大学生简单个人网页作品代码HTML5+CSS大作业——彭于晏明星(15页) _网页设计期末作业
文章目录一.作品展示二.文件目录三.代码实现一.作品展示二.文件目录三.代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
html制作网页案例代码-HTML5+CSS大作业——三八女人节主题设计(1页)-
HTML5+CSS大作业--三八女人节主题设计(1页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
css div网页布局代码自适应,css+div页面布局之1 -- 自适应
浮动 float属性:定义元素在哪个方向浮动.float:left | right | none 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 外边距 margi ...
js关于setTimeout实现延时执行函数并进行传参
传参方式一:setTimeout第一个参数可以是一段JS的代码字符串片段,第二个参数为延迟时间单位ms <script> function ab() { var a=1; var b =1 ...
js中怎么写自执行函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
js中的匿名函数和匿名自执行函数
1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id=& ...
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序员 ...
HTML5七夕情人节表白网页(结婚倒计时) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤结婚倒计时❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序员表白 ...

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

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

最新文章

热门文章