练习: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 ...
随机推荐
- ORACLESQL语句的优化
ORACLESQL语句的优化: 选择最有效率的表名顺序:应该选择记录条数最少的表作为基表! 因为Oracle解析器的处理顺序是从右至左的.当ORACLE处理多个表时, 会运用排序及合并的方式连接它们. ...
- Ubuntu 18.04.1 下快速搭建 LNMP环境
1.Nginx的安装 Nginx安装是属于最简单的,只需要在命令行执行 sudo apt-get install nginx 就能自动安装 Nginx,其中过程中需要 选择 Y/n 的选择Y就行了,当 ...
- AT24 I2C EEPROM解析及测试
关键词:AT24.I2C.nvmem.EEPROM. 1. AT24C介绍 AT24C是一款采用I2C通信的EEPROM,相关驱动涉及到I2C和nvmem. I2C是读写数据的通道,nvmem将AT2 ...
- odoo学习
odoo视图对应模型:model="ir.ui.view"> <record id="mrp_workcenter_view_light_inherit&qu ...
- eclipse上配置svn
eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 使用eclipse 里Help菜单的“Install New Software”,通过 ...
- centOS中mysql一些常用操作
安装mysqlyum -y install mysql-server 修改mysql配置vi /etc/my.cnf 这里会有很多需要注意的配置项,后面会有专门的笔记暂时修改一下编码(添加在密码下 ...
- 干货型up主
很多教学视频,我看了反射,正在看JAVAWEB 和Spring 讲得很清楚 反正就是很好!!! https://space.bilibili.com/326782142?spm_id_from=33 ...
- Eclipse 查看 WebService 服务请求和响应消息
每个WebService 对入参和返参都是有自己的要求的:别人调用我的WebService,需要按照我的要求进行传参.当我返回数据时,我也得告诉别人,我的返回数据是怎样组织的,方便别人读取. 那怎样查 ...
- Spring MVC 使用介绍(九)—— 异常处理
一.概述 Spring MVC异常处理功能的作用为:捕捉处理器的异常,并映射到相应视图 有4种方式: SimpleMappingExceptionResolver:通过配置的方式实现异常处理,该方式简 ...
- ESXI 6.5安装详细步骤
网址:http://blog.51cto.com/laotang6/2044861 ESXi是专为运行虚拟机.最大限度降低配置要求和简化部署而设计.只需几分钟时间,客户便可完成从安装到运行虚拟机的全过 ...