移动并改变alpha
<script type="text/javascript">
function obj(x){return document.getElementById(x);}
var intera;
var setep=5;
function sf(){
clearInterval(intera);obj("ms").innerHTML = '';
intera = setInterval(move,10);
function move(){
var sl = parseInt(obj("ss").style.left.replace("px",""));
if(sl<200){
obj("ss").style.left = (sl+setep)+"px";
obj("ss").style.opacity = (sl/200).toFixed(2);
obj("ms").innerHTML = obj("ms").innerHTML+" "+(sl/200).toFixed(2);
obj("ss").filters.alpha.opacity = parseInt(sl/200*100);
}
else{
clearInterval(intera);
}
}
}
function sf2(){
clearInterval(intera);obj("ms").innerHTML = '';
clearInterval(intera);
intera = setInterval(move,10);
function move(){
var sl = parseInt(obj("ss").style.left.replace("px",""));
if(sl>100){
obj("ss").style.left = (sl-setep)+"px";
obj("ss").style.opacity = (sl/200).toFixed(2);
obj("ss").filters.alpha.opacity = parseInt(sl/200*100);;
obj("ms").innerHTML = obj("ms").innerHTML+" "+(sl/200).toFixed(2);
}
else{
clearInterval(intera);
}
}
}
</script>
<label>
<input type="button" name="Submit" value="按钮" onmouseover="sf()" onmouseout="sf2()" />
</label>
<div style="width:100px; height:20px; background:#FF0000; position:absolute; top:100px; left:100px;filter:alpha(opacity=0);opacity:0;" id="ss"></div>
<div id="ms"></div>
移动并改变alpha的更多相关文章
- iOS开发——View的透明属性hidden、alpha、opaque
Hidden.Alpha.Opaque的区别 在iOS中,每个View都有Hidden.Alpha.Opaque三个关于透明的属性,官方文档介绍如下: 1. @property(nonatomic) ...
- 【Flex】去除外边框,底背景透明,改变exe的icon
一.去除程序外边框 1.在 xx-app.xml文件里,找到 <!-- <systemChrome></systemChrome> --> 这句话,然后删掉注释 ...
- UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线
一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...
- 学习 opencv---(3) ROI 区域图像叠加&初级图像混合
在这篇文章里,我们一起学习了在OpenCV中如何定义感兴趣区域ROI,如何使用addWeighted函数进行图像混合操作,以及将ROI和addWeighted函数结合起来使用,对指定区域进行图像混合操 ...
- 感知机的对偶形式——python3实现
运用对偶的(对应原始)感知机算法实现线性分类. 参考书目:<统计学习方法>(李航) 算法原理: 代码实现: 环境:win7 32bit + Anaconda3 +spyder 和原始算法的 ...
- 【转】android 属性动画之 ObjectAnimator
原文网址:http://blog.csdn.net/feiduclear_up/article/details/39255083 前面一篇博客讲解了 android 简单动画之 animtion,这里 ...
- UIView简单动画
UIView动态实现的效果有以下几种: 1.动态改变frame 2.动态改变color 3.动态改变alpha 4.动态改变bounds 首先,我们先看几种BasicView动画 #pragma ma ...
- Android 动画之AlphaAnimation应用详解
窗口的动画效果,淡入淡出什么的,有些游戏的欢迎动画,logo的淡入淡出效果就使用AlphaAnimation.AlphaAnimation(0.01f, 1.0f); 从0.01f到1.0f渐变.学过 ...
- jQuery backgroundColor的animate效果
我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果.比如说,颜色.背景颜色的变换. animate一般只支持大小,位置,透明度的 ...
随机推荐
- lua的学习
lua是什么 Lua是一中嵌入式的脚本语言. Lua语言可以独立进行编程,但这不是其主要的使用方式.Lua虽然有动态.灵活的语法提供强大的功能,但并不像 Java.Python 等一样有一个完善的库( ...
- Android 动画之ScaleAnimation应用具体解释
android中提供了4中动画: AlphaAnimation 透明度动画效果 ScaleAnimation 缩放动画效果 TranslateAnimation 位移动画效果 RotateAnimat ...
- R-plot
颜色.图例和线 在散点图中添加信息.图例以及回归线. 模拟数据 #模拟数据 dat <- data.frame(X = runif(100,-2,2),T1 = gl(n=4,k=25,labe ...
- cassandra + lucene集成
Stratio’s Cassandra Lucene Index Stratio’s Cassandra Lucene Index, derived from Stratio Cassandra, i ...
- asp.net文件下载
protected void btn_Down(object sender, EventArgs e) { string filePath = Server.MapPath("/TradeL ...
- HTML——JavaScript简介
一.简介: JavaScript是个脚本语言,需要有宿主文件,他的宿主文件是HTML文件. JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. JavaSc ...
- Tera Term——访问linux的ssh工具
个人感觉他是一款免费的并且比较好用的ssh工具,下载地址: http://logmett.com/index.php?/products/teraterm.html 下载之后一路下一步就可以了.可以选 ...
- uiwebview 播放视频
先吐槽下 昨天为了做一个链接优酷的视频难死我了 最后找到一个解决办法 就是uiwebview 播放视频,但是问题又出来了 怎么监听视频开始播放呢??? 我从百度着了4个小时 最后无功而返 最后我 ...
- js常用DOM操作
在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...
- 【译】Optimize caching-缓存优化
缓存优化 大部分的网页都包括不常更改的资源,比如CSS文件,图片文件,JavaScript文件等.这些资源通过网络下载需要一定的时间,这就增加了网页加载的总时间.HTTP缓存可以让这些资源通过浏览器以 ...