此文章仅仅提供学习，如果转载请注明出处！！！如果复用~~~点个赞就好了！！！
===========================华丽的分割前=============================
首先学习一下一个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();
效果如下图
image
===============================正儿八经的干货来了=============================
以前是全部代码，不啰嗦。。。
<!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>
开网页的效果：
image
五秒过后，大图消失，小图出现，鼠标移上去可以选择重播和彻底关闭！
image
喜欢的童鞋点个赞可否？**
