练习: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 ...
随机推荐
- 明天研究下jpa直接像django一样生成
https://blog.csdn.net/yztezhl/article/details/79390714 自动生成 教程-- https://blog.csdn.net/mxjesse/artic ...
- echarts堆叠图添加总量
echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图 堆叠是在柱状图的基础上,给几项设置同一stack来实现的.不考虑在tips中实现总和,有两种方式可以实现总和 ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- 22 python 初学(类,面向对象)
python: 函数式 + 面向对象 函数式可以做所有的事,是否合适? 面向对象: 一.定义: 函数: def + 函数名(参数) 面向对象: class -> 名字叫 Bar 类 def ...
- 手动用tomcat启动war包,无法访问web项目
先说一下自己采的小坑,网上大多解答都是复制来复制去,不说重点在哪.我这里简单总结下访问路径问题 一.用idea打成war包,具体步骤如下图: 步骤:在项目配置选Artifacts新建Web Appli ...
- block,inline,inline-block区别
block:多個元素豎直排列,每個元素單獨占一行,寬高可以設置,padding.margin可以設置: inline:多個元素占一行,一行放不下了,才轉入下一行,寬高不能設置,水平的padding.m ...
- 使用jar包格式化Docker 容器日志
前面使用JS格式化textarea中的日志内容,但局限于JS语言性能,在日志内容较多时效率无法接受,建议日志内容大于5000行时转投本java程序,文末提供jar包下载. LogsFormat.jav ...
- 【JVM】Java内存模型
原文:多线程之Java内存模型(JMM)(一) 概述 多任务和高并发是衡量一台计算机处理器的能力重要指标之一.一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions Per S ...
- zookeeper在windows及linux(含多节点)环境下安装及其命令使用
zookeeper下载 下载url:http://www.apache.org/dyn/closer.cgi/zookeeper/ windows下安装zookeeper 解压到D盘 创建logs目录 ...
- CF1059D Nature Reserve
原题链接 网络不好的可以到洛谷上去QwQ 题目大意 有N个点,求与y=0相切的,包含这N个点的最小圆的半径 输入输出样例 输入: 2 0 1 1 1 输出 0.625 感觉最多是蓝题难度? 首先无解的 ...