原生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什么的.给你格式化下 ...
随机推荐
- 用户IP地址的三个属性的区别(HTTP_X_FORWARDED_FOR,HTTP_VIA,REM_addr）
一.没有使用代理服务器的情况: REMOTE_ADDR = 您的 IP HTTP_VIA = 没数值或不显示 HTTP_X_FORWARDED_FOR = 没数值或不显示 二.使用 ...
- RabbitMQ---3、c#实现
1.EasyNetQ组件的使用 EasyNetQ组件的使用方式比较简单,跟很多组件都类似,例如:建立连接,进行操作做等等,对于EasyNetQ组件也是如此.(mq的升级,用于简化rabbitmq应用代 ...
- flask中的数据操作
flask中数据访问: pip install flask-sqlalemy 创建数据: 创建app的工厂 from flask import Flask from flask_sqlalchemy ...
- 10、springboot之集成druid
在pom.xml中添加 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid< ...
- C#学习笔记（基础知识回顾）之值类型和引用类型
一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...
- Maven学习总结（三）：修改从Maven中心仓库下载到本地的jar包的默认存储位置
一:修改从Maven中心仓库下载到本地的jar包的默认存储位置 从Maven中心仓库下载到本地的jar包的默认存放在”${user.home}/.m2/repository”中,${user.home ...
- input file样式美化
默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...
- kali 的端口扫描nmap
输入“nmap+空格+“-O”+空格+IP地址或域名. 扫描所有TCP端口:输入“nmap+空格+“-sT”+空格+IP地址或域名” 扫描所有开放的UDP端口:输入“nmap+空格+”-sP”+空格+ ...
- 图片（imageView）
图片(imageView): 常用属性: android:scaleType(图片显示的格式) android:src(图片源,一般使用的资源) android:scaleType属性的常用取值 0. ...
- [转] Linux 3.10 ARM Device Tree 的初始化
[转] Linux 3.10 ARM Device Tree 的初始化 本文代码均来自标准 linux kernel 3.10,可以到这里下载 https://www.kernel.org/ ...