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. Discuz的缓存体系

    参考文档:<http://dev.discuz.org/wiki/index.php?title=缓存机制> Discuz中涉及数据缓存的地方有: 1. session Dz的sessio ...

  2. EffectiveJava——类层次优于标签类

    标签类: 有时候,可能会遇到带有两种甚至更多钟风格的类的实例的类,并包含表示实例风格的(tag)域.例如下面这个类,它能够表示圆形或者矩形: /** * 类层次优先与标签类 * @author wei ...

  3. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

  4. gulp学习笔记--简单入门

    一.准备工作 1.gulp是基于nodeJS的前端构建工具,所以全局安装nodeJS 2.利用npm全局安装gulp. npm install -g gulp 3.在项目根目录下新建文件package ...

  5. Get a developer license for windows store app

     获取你的开发者许可证 开发人员许可证是免费.如果您通过使用微软账户获取一个或多个开发人员的许可证,您必须续订他们每隔 30 天 当您运行或调试应用程序第一次在远程机器上或直接连接到您的开发计算机的设 ...

  6. virtualbox虚拟机迁移出现"connot find device eth0"错误

    我在自己的机器上面配置virtualbox虚拟机完毕以后,移植到另外一台机器上面,登陆页面总是在检查network,并且最后网络加载失败,不论我是用桥接还是NAT方式连接.登陆系统以后,我尝试连接网络 ...

  7. Linux useful command

    查看linux系统里面的各个目录.文件夹的大小和使用情况, 先切换到需要查看的目录,如果需要查看所有linux目录的使用情况就直接切换到系统跟目录,然后执行: du -h --max-depth=1 ...

  8. File类的常用方法

    public static void GetFileInfo()    {                File file=new File("e:","two.txt ...

  9. UWP开发-重新理解MVVM

    MVVM是一个比较热门的开发框架,尽管已经出现很久了,仍然比较受欢迎.MVVM框架包括: M:Model:Model指的是数据模型,例如你要在页面展示联系人信息,那么Model就是联系人的模型,包括联 ...

  10. App开发流程之配置Info.plist文件

    Info.plist文件控制应用的全局配置,例如bundle name,display name. 先来看一下默认创建的Info.plist文件 右键左侧的Info.plist文件,可以open as ...