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. 基于Eclipse的Go语言可视化开发环境

    http://jingyan.baidu.com/article/d7130635032e2f13fdf475b8.html 基于Eclipse的Go语言可视化开发环境 | 浏览:2924 | 更新: ...

  2. ArrayList等常见集合的排序问题

    对于ArrayList等常用的集合具体业务类,基本上都实现了Comparable接口,即可以用来比较装载的对象实体. 主要用Collections.sort方法对集合类中的对象进行排序 Collect ...

  3. 自己写的表格插件autotable

    自己写的表格插件autotable 作者:田想兵,个人网址:http://www.lovewebgames.com 这个表格插件所完成的功能是:ajax请求数据,然后动态绑定到指定表格下,格式化,分页 ...

  4. 关于JS闭包，作者不详（转）

    说明:本文由两篇文章结合而成,系从他人笔记中转过来的, 具体作者不详.因为觉得不错,遂共享之.如有侵权,立删致歉. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变 ...

  5. Java从零开始学四十七(注解简述)

    一.Java中注解Annotation 什么是注解:用来描述数据的数据(元数据). Java代码里的特殊标记.它为代码中添加用Java程序无法表达的额外信息提供一种形式化的方法,使用我们可以在未来的某 ...

  6. 朝花夕拾-android 获取当前手机的内存卡状态和网络连接状态

    序言: 人的一生是一个选择的过程. 如果脚下只有一条路,只要一往无前即可,不用担心走错.即使是错也别无它法.然而人是不安分的,况且安于独木桥的行走,其目的地由于没有蜿蜒曲折去遮挡行路人的视线,一往无前 ...

  7. java实现栈和队列

    class Node { int val; Node next; Node(int x) { val = x; next = null; } } class Stack { Node top; pub ...

  8. OC语言-08-深拷贝与浅拷贝详解（示例）

    概述 拷贝:复制一个与源对象内容相同的对象 实现拷贝,需要遵守以下两个协议 NSCopying NSMutableCopying 拷贝返回对象的种类 可变,mutableCopy消息返回的对象 不可变 ...

  9. iOS之UI--关于modal

    modal的效果展示: 关于modal的涉及到的知识点: 1.当一个控制器被销毁的时候,它里面所有子控制器的业务逻辑都不能够处理 2.当一个控制器被销毁的时候,它里面所有子控件的业务逻辑都不能够处理 ...

  10. IOS之KVC和KVO(未完待续)

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...