js原生实现div渐入渐出
jq对渐入渐出进行封装,简单的使用连个方法就可以实现。fadeIn(),fadeOut();如果我们界面没有使用jq那么原生怎么实现呢?
我们讲解一下,这个原理。当我们要实现渐入的时候,首先是让隐藏的div慢慢的显示,通过让opacity慢慢从 0.0 (完全透明)到 1.0(完全不透明)。渐出就是逻辑反过来的。
下面我们直接贴代码:
css:
* {margin:; padding:}
body {font:12px Verdana,Arial; color:#; background:#}
a {color:#; text-decoration:none}
a:hover {color:#bbb}
#wrapper {width:500px; margin:75px auto}
#buttons {height:35px}
.button {border:1px solid #eee; background:#ccc; border-radius:3px; -moz-border-radius:3px; padding:4px 5px; width:245px; text-align:center; cursor:pointer; float:left; color:#}
.button:hover {border:1px solid #fff; background:#d9d9d9; color:#}
.floatright {float:right}
#fade {opacity:; filter:alpha(opacity='') border-radius:3px; -moz-border-radius:3px; margin-bottom:10px; padding:9px 10px ; height:26px; border:1px solid #; background:#355c33; color:#79af72; text-shadow:1px 1px #21341d}
html:
<div id="wrapper">
<div id="fade">JavaScript</div>
<div id="buttons">
<div class="button" onclick="fadeEffect.init('fade', 1)">Fade In</div>
<div class="button floatright" onclick="fadeEffect.init('fade', 0)">Fade Out</div>
</div>
</p>
</div>
js:
var fadeEffect=function(){
return{
init:function(id, flag, target){
this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? : ;
this.flag = flag || -;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * : ;
this.si = setInterval(function(){fadeEffect.tween()}, );
},
tween:function(){
if(this.alpha == this.target){
clearInterval(this.si);
}else{
var value = Math.round(this.alpha + ((this.target - this.alpha) * .)) + ( * this.flag);
this.elem.style.opacity = value / ;
this.elem.style.filter = 'alpha(opacity=' + value + ')';
this.alpha = value
}
}
}
}();
/*这个可以实现从上缓慢移入过渡效果,注意div必须是绝对定位。*/
/*上图*/
if (document.getElementById||document.all)
var crossheader=document.getElementById? document.getElementById("flyin").style : document.all.flyin.style
function animatein(){
if (parseInt(crossheader.top)<){
crossheader.top=parseInt(crossheader.top)++'px'
}
else{
crossheader.top=
clearInterval(start)
fadeEffect.init('fade', );
}
}
当然啦,这里必须要初始化
start = setInterval("animatein()",10);
js原生实现div渐入渐出的更多相关文章
- 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题
在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...
- MFC上下浮动与渐入渐出消息提示框实现
类似QQ与360软件,消息提示有两种.上下浮动.渐入渐出. 1.上下浮动提示框实现 机制,定时器响应上下浮动消息. 主要API:MoveWindow. 源码如下UpDownTipDlg.h.UpDow ...
- MFC渐入渐出框实现方式二
类似360消息弹出框,实现方式一见http://blog.csdn.net/segen_jaa/article/details/7848598. 本文采用另外的API实现渐入渐出效果. 主要API:S ...
- NSIS:实现程序窗口逐渐透明的渐入渐出效果
原文NSIS:实现程序窗口逐渐透明的渐入渐出效果 需要修改版的插件(支持timer功能): MUI:InstallOptions.dll MUI2:nsDialogs.dll 以及system插件,( ...
- [Unity3D]Unity3D游戏开发之Logo渐入渐出效果的实现
---------------------------------------------------------------------------------------------------- ...
- 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- js渐隐渐入渐出效果 fadeOut fadeIn
//fadeOut //function start function fadeOut(ele,speed){ var ele=document.getElementById(ele); var op ...
- 以“图片渐入渐出”为例讲述jQuery插件的具体实现
首先声明,此代码以网友“斯迈欧”原创作为此例的讲解: 在这之前我们先看看我们要做的效果是什么样的: 解析下面的样式:我们要图片在过“一定时间”后自动切换,在右下角处有小方块似数字1,2,3,4,这些数 ...
- 转 android 从底部弹出一个popuwindow,渐入渐出效果。我这里是用在购物车需要选择购买选项的操作。
最近要改客户端,需要实现一个从底部弹出的popuwindow,像我这种渣渣android技术,能整出popuwindow但是整不出动画,百度之,记录一下. 从下面这个地址转的 http://blog. ...
随机推荐
- Automatically migrating data to new machines kafka集群扩充迁移topic
The partition reassignment tool can be used to move some topics off of the current set of brokers to ...
- TIPS FOR IMPROVING PERFORMANCE OF KAFKA PRODUCER
When we are talking about performance of Kafka Producer, we are really talking about two different t ...
- 对flexbox伸缩概念的深入浅出解释
flex布局最难理解的,就是剩余空间和伸缩概念了,此文很好的作了解释: https://www.cnblogs.com/ghfjj/p/6529733.html 转自:http://zhoon.git ...
- Node.js作web服务器总结
1.为什么Node.js用JS开发 Node.js 含有一系列内置模块,使得程序可以脱离 Apache HTTP Server 或 IIS,作为独立服务器运行. 首先,我们都清楚的是,同时接收数 ...
- C#异步编程のTask模型返回值Task<TResult>应用
文中所有Task<TResult>的返回值都是直接用task.result获取,这样如果后台任务没有执行完毕的话,主线程会等待其执行完毕,这样的话就和同步一样了(看上去一样,但其实awai ...
- IOS解析XML文件
这里使用NSXMLParser来解析,这个是apple自带的xml解析库,有个參考文章:http://www.raywenderlich.com/553/xml-tutorial-for-ios-ho ...
- [容斥原理] hdu 4135 Co-prime
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4135 Co-prime Time Limit: 2000/1000 MS (Java/Others) ...
- centos7下安装docker(22.docker swarm-----service)
运行service 执行以下命令: docker service create --name web-server httpd 通过docker service ls查看swarm中的service ...
- redis加锁
1. redis加锁分类 redis能用的的加锁命令分表是INCR.SETNX.SET2. 第一种锁命令INCR 这种加锁的思路是, key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 ...
- CSAPP:第六章 存储器层次结构
存储器层次结构 关键点:内存 6.1 随机访问存储器6.2 局部性6.3 存储器层次结构 6.1 随机访问存储器 随机访问存储器(Random-Access Memory,RAM)分为两类:静态的 ...