<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
margin-left: 200px;
opacity: 0.3;
alpha(opacity = 30);
}
</style> <script>
window.onload = function ()
{
var oimg = document.getElementById('img1');
var timer = null; oimg.onmouseover = function ()
{
touming(this,100,10)
} oimg.onmouseout = function ()
{
touming(this,30,-10);
} function touming(obj,target,speed)
{
clearInterval(timer); timer = setInterval(function ()
{
var icur = Math.round(css(obj,'opacity')*100);
if(icur == target)
{
clearInterval(timer);
}
else
{
obj.style.opacity = (icur + speed)/100;
obj.style.filter = 'alpha(opacity= '( + icur + speed ) + ')';
}
},30); } function css(obj,attr)
{
if(obj.currentStyle)
return obj.currentStyle[attr];
else
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head> <body>
<img id="img1" src="img/1.jpg" alt="图片">
</body>
</html>

js运动 淡入淡出的更多相关文章

  1. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  2. js+jq 淡入淡出轮播(点击+定时+鼠标进入移出事件)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  4. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  5. js实现多个图片淡入淡出,框架

    单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; backgr ...

  6. js 淡入淡出的图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js淡入淡出

    示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...

  8. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  9. [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)

    javascript中,如何让一个元素(比如div)运动起来呢? 设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 ); <style> div { ...

随机推荐

  1. Leetcode 详解(Valid Number)

    Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...

  2. how to use ldid

    1.进入管理员权限 sudo -s 2.赋予app运行权限 chmod -R 777 cellmap.app 3.查看app权限 ldid -e cellmap.app/cellmap 4.打开窗口 ...

  3. JavaEE基础(十)

    1.面向对象(package关键字的概述及作用) A:为什么要有包 将字节码(.class)进行分类存放 包其实就是文件夹 B:包的概述 举例: 学生:增加,删除,修改,查询 老师:增加,删除,修改, ...

  4. word2010中怎样快速修改同级标题格式

    我要把所有三级目录的字体增大,怎样能一次选中批量修改?文章很长,一百多个三级标题.word 2010中提供了快速修改的方法: ①将光标定位在一个三级标题中② <IGNORE_JS_OP> ...

  5. XSS简介

    xss又叫css,为了与前端的css区别,所以叫xss,即跨站脚本攻击. XSS原理解析 XSS攻击是在网页中嵌入客户端恶意脚本代码,恶意代码一般都是javascript编写的.想要深入研究XSS,必 ...

  6. [CocoaPods]使用CocoaPods进行测试

    测试规格 从CocoaPods 1.3.0开始,pod现在可以提供测试规范(或简称测试规范).测试规范可用于描述给定pod的测试源. 这是一个示例CoconutLib.podspec,一个定义测试规范 ...

  7. Vxlan学习笔记——实现

    1. 创建NVI NVI(Network Virtual Instance)网络虚拟实例,是VTEP上为一个VXLAN提供L2交换服务的虚拟交换实例,NVI和VXLAN ID一一对应.别和VNI混了. ...

  8. python第二十九天-----继续学习第三模块——前几天旅行去了

    subprocess模块 import subprocess subprocess.getstatusoutput('dir')#接收字符串格式命令,返回元组形式,第1个元素是执行状态,第2个是命令结 ...

  9. jvm(2)类的初始化(二)和实例化

    深入理解Java对象的创建过程:类的初始化与实例化 对象实例化内存分析: 对内存分配情况分析最常见的示例便是对象实例化: Object obj = new Object(); 这段代码的执行会涉及ja ...

  10. JQuery实现锚点平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a> ...