1.当鼠标指针经过图像时图像震动效果

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>当鼠标指针经过图像时图像震动效果</title>

<style type="text/css">

.zhendimage{ position:relative; }

</style>

<script type="application/javascript" >

var rector =3;

var stopit = 0;

var a=1;

var zhend;

function init(which)

{

    stopit =0;

    zhend = which;

    zhend.style.left =0;

    zhend.style.top =0;

}

function rattleimage()

{

    if(stopit==1)

    {

        return;

    }

    if(a==1)

    {

        zhend.style.top = parseInt(zhend.style.top)+rector+"px";

    }

    else if(a==2)

    {

        zhend.style.left = parseInt(zhend.style.left)+rector+"px";

    }

    else if(a==3)

    {

        zhend.style.top = parseInt(zhend.style.top)-rector+"px";

    }

    else

    {

        zhend.style.left = parseInt(zhend.style.left)-rector+"px";

    }

    if(a<4)a++;    else a =1;

    setTimeout("rattleimage()",50);

}

function stoprattle(which)

{

    stopit = 1;

    which.style.left =0;

    which.style.top =0;

}

</script>

</head>

<body>

<div>

<img class="zhendimage" onmousemove="init(this);rattleimage();"

onmouseout="stoprattle(this);"  src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg002.png" /></div>

</body>

</html>

2.图片闪烁效果

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片闪烁效果</title>

<script type="application/javascript">

function blink()

{

//定义图片的显示和隐藏属性

tp.style.visibility = (tp.style.visibility=="hidden")?"visible":"hidden";

//每0.5秒刷新一次

setTimeout("blink()",500);

}

</script>

</head>

<body onload="blink();">

<div id="tp">

<img src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg" style="width:160px; height:160px;" />

</div>

</body>

</html>

3.自动切换图像

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>自动切换图像</title>

<script type="application/javascript">

var imgs = new Array

(

"http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg",

"http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg004.gif",

"http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_%e6%9a%82%e6%97%a0%e5%9b%be%e7%89%87.gif"

)

var nums =0;

setInterval("fort()",1000);

function fort()

{

    iimg.src = imgs[nums];

    nums++;

    if(nums==3)nums=0;

}

</script>

</head>

<body>

<div><img id="iimg" src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg" height="160" width="160" /></div>

</body>

</html>

来源：《HTML、CSS、Javascript网页制作从入门到精通》15.2章节

【温故而知新-Javascript】图片效果（图像震动效果、闪烁效果、自动切换图像）的更多相关文章

  1. 获取bing.com的图片并在gnome3中设置自动切换

    发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...

  2. 自定义Image自动切换图像控件

    做这么一个控件,图片自动切换,形成动画效果. 随便的码码,码完发现东西太少了,不过还算完善. public class MyPictureBox : PictureBox { Timer timer ...

  3. C# 图像自动切换

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  4. javascript - 图片的幻灯片效果

    javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...

  5. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  6. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  7. 《JavaScript 实战》：JavaScript 图片滑动切换效果

    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...

  8. 《JavaScript 实战》：实现图片幻滑动展示效果

    滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果.这个其实就是以前写的图片滑动展示效果的改进版,那是我第一篇比较受关注的文章,是时候整理一下了. 有如 ...

  9. jQuery实现的Div窗口震动效果实例

    本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...

随机推荐

  1. linux下安装或升级GCC4.8，以支持C++11标准

    C++11标准在2011年8月份获得一致通过,这是自1998年后C++语言第一次大修订,对C++语言进行了改进和扩充.随后各编译器厂商都各自实现或部分实现了C++中的特性. 如需查看各编译器对C++1 ...

  2. 后缀数组---New Distinct Substrings

    Description Given a string, we need to find the total number of its distinct substrings. Input T- nu ...

  3. 【图解】Eclipse下JRebel6.2.0热部署插件安装、破解及配置【转】

    标签: 这两天在做后台管理系统,前端框架用Bootstrap,后端用SpringMVC+Velocity.在开发过程中,经常需要对界面进行微调,调整传参等,每次更改一次java代码,就得重新部署一次, ...

  4. 那一夜,我们..奋笔疾书敲出的--->>库存管理系统

    说了会再见,最近好吗?无论你在哪里>也许你在温暖的家,或许你在身在异乡的城市;或许你高高的峰顶放生高歌,或许你还在陡峭的山峰半空努力攀爬.......相信我们都会登上顶峰,"会当凌绝顶 ...

  5. PowerBuilder反编译

            最近需要了解某个PowerBuilder程序如何工作的,这已经是某个时代的产物了.除了EXE之外,还有一些PBD文件.PBD文件是PowerBuilder动态库,作为本地DLL的一个替 ...

  6. 六个创建模式之抽象工厂模式(Abstract Factory Pattern)

    问题: 使用工厂方法模式的主要问题是工厂类过多,每个产品对应一个工厂,不利于维护.因此可以考虑使用一个工厂创建一个产品族. 定义: 提供创建一些列相关或相互依赖的对象实例的接口,这些类可以称为一个产品 ...

  7. 时间复杂度&空间复杂度

    时间复杂度 参考链接: http://univasity.iteye.com/blog/1164707 空间复杂度 http://blog.csdn.net/booirror/article/deta ...

  8. c++之函数重载(函数匹配)

    Case void f(); void f(int); void f(int, int); void f(double, double = 3.14); 匹配原则: 1)其形参数量与本次调用提供的实参 ...

  9. SQL数据库基础（八）

    连接查询:通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 常用的两个链接运算符: 1.join   on 2.union     在关 ...

  10. Engine中如何实现先居中显示要素再闪烁

    [解决办法]:需要在要素居中显示之后.闪烁之前执行IScreenDisplay.UpdateWindow强制全刷,如: //居中显示要素 IActiveView actView = axMapCont ...