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. Fluent Nhibernate and Stored Procedures

    sql:存储过程 DROP TABLE Department GO CREATE TABLE Department ( Id INT IDENTITY(1,1) PRIMARY KEY, DepNam ...

  2. 小白学Linux（三）--文件系统基本结构

    Linux文件系统是一个倒立的单根树状结构,文件名称严格区分大小写(windows系统则是对大小写不明感的).路径用“/”分隔,跟windows的“\”不同. 这里我画了一张一般Linux系统的正常目 ...

  3. HDU 1028（母函数）

    Online Judge Online Exercise Online Teaching Online Contests Exercise Author F.A.QHand In HandOnline ...

  4. http get post

    使用java代码模拟http请求 package ftp; import java.io.BufferedReader; import java.io.IOException; import java ...

  5. Python 学习笔记1

    1.Python2.x与3​​.x版本区别 2.常量与变量 3.if  elif  else 4.注释 5.用户交互 6.字符串拼接 7.文件扩展名 8.缩进 9.运算符 10.while循环 Pyt ...

  6. sql server 2008空间释放

    今天一原来的同事打电话说他们两个表加起来1.2t(每个表都有三四十个字段,6亿条记录),创建了索引之后空间增长到了2.2t,然后没有执行成功.问题在于虽然没执行成功,可是空间没有释放,整个系统只有2. ...

  7. rabbitmq队列中消息过期配置

    最近公司某个行情推送的rabbitmq服务器由于客户端异常导致rabbitmq队列中消息快速堆积,还曾导致过内存积压导致rabbitmq客户端被block的情况.考虑到行情信息从业务上来说可以丢失部分 ...

  8. web安全——防火墙

    简介 用于实现服务器(Linux)的访问控制的功能的. 分硬件和软件防火墙. 主要是控制访问的流入和服务器的流出. 通过黑名单和白名单的思想来实现更细粒度的控制,这个一般结合其他的应用来定义策略实现. ...

  9. ResponsiveSlides.js 幻灯片实例演示

    在线实例 默认效果 导航和分页 缩略图 描述说明 回调函数 <div class="wrap">     <ul class="rslides" ...

  10. 如果一个游戏上面加一个透明层，js能不能实现 点击透明层的任意点 而正常玩游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...