js实现多个图片淡入淡出，框架
单个淡入淡出已经写过，可以看看上几遍的博文
<style>
*{
margin:0;
padding:0;
}
div{
height:100px;
width:100px;
background:red;
margin:0 auto;
margin-bottom:5px;
filter:alpha(opacity:30);
opacity:0.3;
}
</style> <body>
<div></div>
<div></div>
<div></div>
<div></div> </body>
js代码如下
带注释
<script>
window.onload=function()
{
var div=document.getElementsByTagName('div');
for(var i=0;i<div.length;i++)
{
div[i].alpha=30; //每个div都给透明度30
div[i].onmouseover=function() //当鼠标移动到div上时，div的透明度为100
{
startMove(this,100)
}
div[i].onmouseout=function() //当鼠标移出div时，div的透明度为30
{
startMove(this,30)
}
} }
var alpha=30;
function startMove(obj,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var speed=(iTarget-obj.alpha)/10; //速度是目标的透明度减去div原本的透明度除以10，
speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度必需上下取整，因为没有浮点的小数透明度
if(obj.alpha==iTarget) //如果透明度达到目标的透明度，clear
{
clearInterval(obj.timer);
}
else
{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+alpha+')'; //把alpha赋值给透明度
obj.style.opacity=obj.alpha/100;
}
} , 30)
}
</script>
js实现多个图片淡入淡出，框架的更多相关文章
- javascript 图片淡入淡出效果 实例源代码
代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...
- jQuery实现简单的图片淡入淡出效果
整体思路: 1.实现页面布局,设置css样式 2.用jQuery获取需要用到的变量 3.用jQuery为两个按钮绑定事件 一.页面布局: <div class="d1"> ...
- gallery左右滑动时图片淡入淡出
前几天,公司项目有一个功能要做成滑动图片的淡入淡出,要一边滑动一边改变,所以ViewFlipper左右滑动效果就不能了.网上找了很久,也找不到资料,所以自己写了一个,通过滑动改变imageView的透 ...
- [转]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 ...
- js中用面向对象的思想——淡入淡出轮播图
首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换 3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...
- iOS-CALayer图片淡入淡出动画
]; } - (.f; CABasicAnimation *boundsAnimation = [CABasicAnimation animationWithKeyPath:, , ...
- js多物体运动之淡入淡出效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- js笔记----（运动）淡入淡出
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- stanford Protege 4.3 ERROR: Bundle org.protege.common 解决方法
我的java版本是jdk1.8.0_45,安装了protege后打开总显示: ERROR: Bundle org.protege.common [1] Error starting file:/hom ...
- HBase with MapReduce （MultiTable Read）
hbase当中没有两表联查的操作,要实现两表联查或者在查询一个表的同时也需要访问另外一张表的时候,可以通过mapreduce的方式来实现,实现方式如下:由于查询是map过程,因此这个过程不需要设计re ...
- 前后数据交互(ajax) -- 初始化页面表格
// 初始化员工信息列表 function loadpage ( pageNum ) { var keywords = $("#keywords").val(); $(" ...
- SQLAlchemy一对多总结
1.SQLAlchemy之一对多关系 1.1 创建单表 class Test(Base): __tablename__ = 'user' nid = Colume(Integer,primary_ke ...
- Mousejack Hacking : 如何利用MouseJack进行物理攻击
0×00 前言 近期安全公司Bastille Networks(巴士底狱)安全研究员发现大多数无线鼠标和接收器之间的通信信号是不加密的.黑客可对一百米范围内存在漏洞的蓝牙无线键鼠进行嗅探甚至劫持,从而 ...
- SqlServer性能优化（一）
一:数据存储的方式: 1.数据文件:.mdf或.ndf 2.日志文件:.ldf 二:事务日志的工作步骤: 1.数据修改由应用程序发出(在缓冲区进行缓存) 2.数据页位于缓存区缓冲中,或者读入缓冲区缓存 ...
- js 开启video全屏模式
方法一: function launchFullScreen() { var element = document.documentElement; if(element.requestFullScr ...
- “__doPostBack”未定义
项目中发现IE10等高级浏览器报错 ASP.NET无法检测IE10,导致_doPostBack未定义JavaScript错误 为此微软工程师解释如果发布asp2.0 asp4.0发布时,这些浏览器还未 ...
- ;function($,undefined) 前面的分号是什么用处
;function($,undefined) 前面的分号是什么用处 ;(function($){$.extend($.fn...现般在一些 JQuery 函数前面有分号,在前面加分号可以有多种用途:1 ...
- HTML5实现屏幕手势解锁
HTML5实现屏幕手势解锁(转载) https://github.com/lvming6816077/H5lockHow to use? <script type="text/java ...