<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
<script>
window.onload=function(){
var certify=document.getElementById("jvs-certify"),certifyOuter=document.createElement("div"),certifyImg1=document.createElement("img"),certifyImg2=document.createElement("img");
certifyOuter.id="jvs-certifyOuter";
certifyOuter.className="jvs-certifyOuter";
certifyOuter.style.width="100%";
certifyOuter.style.position="relative";
certifyImg1.src = "01.png";
certifyImg1.id = "certify-img1";
certifyImg1.className = "act";
certifyImg1.style.position = "absolute";
certifyImg1.style.left = "0";
certifyImg1.style.top = "0";
certifyImg1.style.display = "block";
certifyImg1.style.width = "100%";
certifyImg1.style.height = "auto";
certifyImg1.style.opacity = "1";
certifyImg1.style.border = "none";
certifyImg1.style.filter = "Alpha(opacity=100)";
certifyImg2.src = "02.png";
certifyImg2.id = "certify-img2";
certifyImg2.className = "act";
certifyImg2.style.position = "absolute";
certifyImg2.style.left = "0";
certifyImg2.style.top = "0";
certifyImg2.style.display = "block";
certifyImg2.style.width = "100%";
certifyImg2.style.height = "auto";
certifyImg2.style.opacity = "0";
certifyImg2.style.border = "none";
certifyImg2.style.filter = "Alpha(opacity=0)";
certify.appendChild(certifyOuter);
certifyOuter.appendChild(certifyImg1);
certifyOuter.appendChild(certifyImg2);
var timer=null,timer1=null,timer2=null;
function clear(time){
time=null;
clearInterval(time)
}
function hasClass( elements,cName ){
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
}
function addClass( elements,cName ){
if( !hasClass( elements,cName ) ){
elements.className += " " + cName;
}
}
function removeClass( elements,cName ) {
if (hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
}
}
function fadeIn(elem){
setOpacity(elem,0);
for(var i = 0;i<=20;i++){
(function(){
timer1=null;
clearTimeout(timer1);
var level = i * 5;
timer1=setTimeout(function(){
setOpacity(elem, level)
},i*25);
})(i);
}
}
function fadeOut(elem){
for(var i = 0;i<=20;i++){
(function(){
timer2=null;
clearTimeout(timer2);
var level = 100 - i * 5;
timer2=setTimeout(function(){
setOpacity(elem, level)
},i*25);
})(i);
}
}
function setOpacity(elem,level){
if(elem.filters){
elem.style.filter = "alpha(opacity="+level+")";
}else{
elem.style.opacity = level / 100;
}
}
function jvsShow(){
var certifyImg=document.getElementById("certify-img1"),certifyMsg=document.getElementById("certify-img2"),hasAct=hasClass(certifyImg,"act");
if(hasAct){
fadeOut(certifyImg);
fadeIn(certifyMsg);
removeClass(certifyImg,"act");
addClass(certifyMsg,"act");
}else{
addClass(certifyImg,"act");
removeClass(certifyMsg,"act");
fadeOut(certifyMsg);
fadeIn(certifyImg);
}
}
timer=window.setInterval(function(){
clear(timer);
jvsShow()
},3000);
}
</script>
</head>
<body>
<div class="aa" style="width:200px;margin:20px auto">
<a style="width:100%;max-width: 199px;" href="javascript:void (0);" target="_blank" id="jvs-certify"></a>
</div>
</body>
</html>
