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. POSTMAN and HTTPie to test APIs

    http://blog.mashape.com/postman-httpie-test-apis/ We love working with APIs at Mashape, and we love ...

  2. 最小生成树Kruskal算法（邻接矩阵和邻接表）

    最小生成树,克鲁斯卡尔算法． 算法简述: 将每个顶点看成一个图． 在所有图中找权值最小的边．将这条边的两个图连成一个图, 重复上一步．直到只剩一个图． 注:将abcdef每个顶点看成一个图．将最小权值 ...

  3. java之Class类详解

    测试中需要用到的代码 InterfaceA代码: package jichu; interface InterfaceA { String s1 = "this is s1 in Inter ...

  4. 那些教程没有的php3-命名空间

    php.net (PHP 5 >= 5.3.0, PHP 7) 定义命名空间 虽然任意合法的PHP代码都可以包含在命名空间中,但只有以下类型的代码受命名空间的影响,它们是:类(包括抽象类和tra ...

  5. RabbitMQ与AMQP协议详解

    1. 消息队列的历史 了解一件事情的来龙去脉,将不会对它感到神秘.让我们来看看消息队列(Message Queue)这项技术的发展历史. Message Queue的需求由来已久,80年代最早在金融交 ...

  6. [CLK Framework] CLK.Threading.PortableTimer - 跨平台的Timer类别

    [CLK Framework] CLK.Threading.PortableTimer - 跨平台的Timer类别 问题情景 开发应用程式的时候,免不了需要加入一些定时执行的设计,例如说:定时更新画面 ...

  7. javascript --- 子对象访问父对象的方式

    在传统面向对象的编程语言里,都会提供一种子类访问父类的特殊语法,引文我们在实现子类方法往往需要父类方法的额外辅助.在这种情况下,子类通常会调用父类中的同名方法,最终以便完成工作. javascript ...

  8. .NET 面试题整理

    概念类 请你说说.NET中类和结构的区别? 答:结构和类具有大体的语法,但是结构受到的限制比类要多. 结构不能申明有默认的构造函数,为结构的副本是又编译器创建和销毁的,所以不需要默认的构造函数和析构函 ...

  9. 对抗静态分析——运行时修复dex

    对抗静态分析——运行时修复dex   本文来源:i春秋社区-分享你的技术,为安全加点温度 零.写在前面   这个系列本来题目想写对抗反编译,可是想想对抗反编译的这个范围有点大,总结如下 灵魂作图   ...

  10. 【读书笔记】iOS-GCD-网络编程要不要使用GCD

    一,网络编程强烈推荐使用异步API. 二,对于网络编程可以断言“线程是魔鬼”.如果在网络编程中使用线程,就很可能会产生大量使用线程的倾向,会引发很多问题.例如每个连接都使用线程,很快就会用尽线程栈内存 ...