练习:javascript淡入淡出半透明效果
划过无透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出半透明效果</title>
<style>
img {width:400px;height:200px;opacity: 0.3;filter:alpha(opacity=30)}
</style>
</head>
<body>
<img src="data:images/4.jpg" alt="" id="img">
<script>
// opacity IE8及以下版本不支持
var oImg= document.getElementById('img');
oImg.onmouseover=function(){
animate(30,100)
}
oImg.onmouseout=function(){
animate(100,30)
}
var timer = null;
function animate(speed,dest){
//speed初始透明度,dest透明度目标值
clearInterval(timer);
timer = setInterval(function(){
speed<dest?speed+=10:speed-=10;
if(speed==dest){
clearInterval(timer);
timer=null;
}else {
oImg.style.opacity=speed/100;
oImg.style.filter="alpha(opacity:"+speed+")";
}
},20)
}
</script>
</body>
</html>
练习:javascript淡入淡出半透明效果的更多相关文章
- javascript淡入淡出效果的实现思路
这个思路是最近写XScroll.js类的时候想明白的.平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了.不过经过分析,我觉得其实只需要一半就行了如题,只有思路,没有代码. 这个思 ...
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
- 淡入淡出(折叠效果)and点击切换背景图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript 图片淡入淡出效果 实例源代码
代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...
- jQuery-4.动画篇---淡入淡出效果
jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...
- 淡入淡出效果模板 js
html文件中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
隐藏与显示 淡入淡出 滑动效果
- [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...
- React-Native ListView加载图片淡入淡出效果的组件
今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件: 'use strict' import React from 'react-native' va ...
随机推荐
- .Net Cache
在.net中有两个类实现了Cache HttpRuntime.Cache 应该程序使用的Cache,web也可以用 HttpContext.Current.Cache web上下文的Cache对象, ...
- php使用root用户启动
一般情况下,肯定是不推荐使用root用户启动php的 但是在某些服务器管理想使用WEB的方式来控制操作的话,那么就必须要使用root用户才有权限操作 1.修改配置文件php-fpm.conf的启动用户 ...
- python之zip打包
import zipfile # 压缩 z = zipfile.ZipFile('z.zip', 'w') z.write('xo.xml') z.write('xxxoo.xml') z.close ...
- python之os
os 系统级别的操作 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell ...
- 0.[Andriod]之从零安装配置Android Studio并编写第一个Android App
0. 所需的安装文件 笔者做了几年WP,近来对Android有点兴趣,尝试一下Android开发,废话不多说,直接进入主题,先安装开发环境,笔者的系统环境为windows8.1&x64. 安装 ...
- Asp.Net Core使用NLog+Mysql的几个小问题
项目中使用NLog记录日志,很好用,之前一直放在文本文件中,准备放到db中,方便查询. 项目使用了Mysql,所以日志也放到Mysql上,安装NLog不用说,接着你需要安装Mysql.Data安装包: ...
- java的List列表转成Tree(树形)结构列表
直接看借鉴博客:https://blog.csdn.net/massivestars/article/details/53911620/ 由于我的业务没有父子级id两个字段,只有一个层级id字段来分层 ...
- python中的编码问题
遇到的问题: (1)ValueError: source code string cannot contain null bytes 发现文件的编码被改成了UTF-16BE,使用pycharm设置项目 ...
- 17.kubernete的dashboard
部署dashboard kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v1.10.1/src/depl ...
- WebViewClient 与 WebChromeClient
WebViewClient帮助WebView处理各种通知和请求事件的,我们可以称他为WebView的“内政大臣”.常用的shouldOverrideUrlLoading就是该类的一个方法,比如: on ...