原生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什么的.给你格式化下 ...
随机推荐
- ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator
在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...
- python——高级特性
切片操作符 Python提供了切片(Slice)操作符,切片操作十分有用,可以通过切片轻松取出某一段数列.比如前10个数: #slice切片操作符 取前10个元素 L=list(range(0,100 ...
- 小程序插入html代码
转自:https://blog.csdn.net/BetterGG/article/details/81027291 一.首先,html 分 2 种情况: 1.我在做详情页开发的时候发现获取到的数据是 ...
- 二、hbase shell工具
hbase单节点安装请参考: https://www.cnblogs.com/lay2017/p/9944387.html 下文演示hbase shell工具常用的命令,首先启动hbase以及进入sh ...
- DynamicJasper入门
JasperReport 在了解DynamicJasper之前不得不先了解一下jasperReport,jasperReport是基于Java的一个开源的报表工具,它使得你可以在Java环境下像其它的 ...
- MongoDB客户端及监控工具
现在许多应用都使用MongoDB存储大量的业务数据,MongoDB基于文档式的存储,在大数据行业的应用还是很普遍的.MongoDB的客户端工具也很多,基于web的却不多,国产的就更少了,下面这款国产的 ...
- SpringMVC_关于<url-pattern>
一.配置 在没有特殊要求的情况下,SpringMVC的中央调度器DispatcherServlet的<url-oattern/>常使用后缀匹配的方式,如写*do. 二.不能写为/* 这 ...
- Vijos / 题库 / 输油管道问题
背景 想念car的GF,car就出了道水题! 描述 某石油公司计划建造一条由东向西的主输油管道.该管道要穿过一个有n 口油井的油田.从每口油井都要有一条输油管道沿最短路经(或南或北)与主管道相连.如果 ...
- django基础一之web框架的本质
一 web框架的本质及自定义web框架 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端,基于请求做出响应,客户都先请求,服务端做出对应的响 ...
- 简单的sqlserver批量插入数据easy batch insert data use loop function in sqlserver
--example 1: DECLARE @pid INT,@name NVARCHAR(50),@level INT,@i INT,@column2 INT SET @pid=0 SET @name ...