原生js模仿jq fadeIn fadeOut效果 兼容IE低版本
<!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>
原生js模仿jq fadeIn fadeOut效果 兼容IE低版本的更多相关文章
- 使用原生js 实现点击消失效果
JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 基于原生js的返回顶部组件，兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- WebSocket兼容到低版本浏览器
就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...
- AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
- 使用socket.io client 开发时兼容IE低版本的办法
使用socket.io client 开发时兼容IE低版本的办法 socket.io提供了针对各个版本浏览器的‘socket’功能的封转:websocket,长连接,流,flash什么的.给你格式化下 ...
随机推荐
- SSRS 报表中的Chart在IE中不显示
解决办法: 重启SSRS服务...
- c# 中 event 和 delegate 的区别
event 是一种特殊的delegate. 1)event 在本类(派生类也不行)之外不能触发.(如果是public的在类外或protected的在派生类中可以使用 += 或 -=, 但不能调用该ev ...
- replace替换，全局和局部替换
<script> var a=document.getElementById("introduce").innerHTML; var b=a.replace(/jone ...
- nodejs添加jsonwebtoken验证
具体使用模块: 使用compression压缩处理请求响应.cors模块添加跨域.helmet安全模块.body-parser解析请求参数.jsonwebtoken用于生成及校验token.使用内置c ...
- SpringFramework中重定向
需求: 需要在两个@Controller之间跳转,实现重定向 解决: @PostMapping("/files/{path1}") public String upload(... ...
- 撩课-Python-每天5道面试题-第6天
一. 函数的概念是什么? 在Python中如何定义?使用场景是什么? 概念 写了一段代码实现了某个小功能; 然后把这些代码集中到一块, 起一个名字; 下一次就可以根据这个名字再次使用这个代码块, 这就 ...
- VPS虚拟化架构OpenVZ、KVM、Xen、Hyper-V的区别
1.OpenVZ OpenVZ(简称OVZ)采用SWsoft的Virutozzo虚拟化服务器软件产品的内核,是基于Linux平台的操作系统级服务器虚拟化架构.这个架构直接调用宿主机(俗称:母机)中的内 ...
- Redis-Map
Redis Map 存储K-V键值对.(跟Java的Map类比) 哈希表结构: typedef struct dictht { dictEntry **table; //哈希表数组 unsigned ...
- java设计模式-----3、抽象工厂模式
抽象工厂模式是所有形态的工厂模式中最为抽象和最具一般性的一种形态.抽象工厂模式是指当有多个抽象角色时,使用的一种工厂模式.抽象工厂模式可以向客户端提供一个接口,使客户端在不必指定产品的具体的情况下,创 ...
- 《JavaWeb从入门到改行》很好的复习资料: SQL语句到底怎么写 ？
本文用到的数据库如下: CREATE DATABASE exam; /创建部门表/ CREATE TABLE dept( deptno INT PRIMARY KEY, dname ), loc ) ...