原生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什么的.给你格式化下 ...
随机推荐
- WCF-终结点之消息路由示例
一. 在前一章中主要介绍了服务端的监听地址与逻辑地址.本节模拟消息转发机制来实际体验一把终结点的监听地址是如何使用的. 先下载一个叫做TcpTrace的小软件(108k),它能够截取端口消息,并转发消 ...
- 记一次吐血的暴力模拟qaq 【多项式输出】
题目描述 一元 n 次多项式可用如下的表达式表示: 其中,aixi称为 i 次项,ai 称为 i 次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输出该多项式: 1. 多项式中 ...
- [C#]LockBits使用笔记
昨天想基于一张图片做个手机锁屏来着,原图如下:主要是嫌白底太丑了,一开始是想画图工具直接油漆桶伺候,然而一浇上去就发现问题了,变成了这样:看来得手工处理一下把底色统一了,原图分辨率挺高的,SetPix ...
- 常见IT英语短语一
SSO (Single sign-on)单点登陆. aspect-oriented programming,AOP面向切面. CORS:Cross-origin resource sharing跨域资 ...
- 在js里面比较大小必须先转换成number
利用js里面的Number函数从对象转换成数值
- ajax异步上传图片三种方案
转自:http://www.jb51.net/article/51180.htm 注:自己尝试了前两种,都可用: 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效 ...
- can't start Git: git.exe
can't start Git: git.exe :不能启动Git 这是因为Git的可执行文件的路径不正确,需要手动设置,. 找到设置Git的窗口 然后修改一下路径就行了 点击OK就可以了.
- 获取JPEGImageEncoder和JPEGCode这两个类
最近要对PDF做一些操作,在查看别人代码,拿过来借用的时候,由于代码不完整,引用的类也不全,导致JPEGImageEncoder和JPEGCode这两个类找不到,后来网上搜索了下,发现这两个类来自于J ...
- Cloud Computing Causing Digital Business Transformation
2015-04-13 Cloud Computing Causing Digital Business Transformation We hear all about the cloud, and ...
- 仿拉手团购App8-- 更多模块
1.获得缓存大小和清除缓存 应用内数据的所有路径: /data/data/com.xxx.xxx/cache - 应用内缓存(注:对应方法getCacheDir()) /data/data/com.x ...