图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力。


当鼠标指针经过图像时图像振动效果

①:在head标签内输入以下代码:

    <style>
.zhendimage{
position: relative;
}
</style>
<script>
var rector= 3,stopit= 0,a=1;
function init(which){
stopit=0;
zhend=which;
zhend.style.left=0;
zhend.style.top=0;
}
function rattleimage(){
if((!document.all&&!document.getElementById)||stop==1)
return
if(a==1){
zhend.style.top=parseInt(zhend.style.top)+rector;
}
else if(a==2){
zhend.style.left=parseInt(zhend.style.left)+rector;
}
else if(a==3){
zhend.style.top=parseInt(zhend.style.top)-rector;
}
else {
zhend.style.left=parseInt(zhend.style.left)-rector;
}
if(a<4)
a++
else
a=1;
setTimeout("rattleimage()",50);
}
function stoprattle(which){
stopit=1;
which.style.left=0;
which.style.top=0;
}
</script>

②:在震动图像的标记内输入以下代码:

<img src="logo.png" class="zhendimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)"/>

图片闪烁效果

制作图片闪烁效果主要是利用style.visibility属性来表示元素的可见性。

①:在head标签内输入以下代码:

    <script>
function blink(){
//定义图片的显示和隐藏属性
tp.style.visibility=(tp.style.visibility=="hidden")?"visible":"hidden";
//每0.5s刷新一次
setTimeout("blink()",500);
}
</script>

②:将光标放在body标记内,输入代码onLoad=”blink()”。

提示:代码onLoad=blink()的作用是当打开网页文档时加载闪烁函数blink()。

③:将图片放置在div id=”tp”标签内。


自动切换图像

利用数组可以实现自动切换图像效果。

①:在head标签内输入以下代码:

 <script>
var img = new Array(3); //创建数组
var nums = 0;
if(document.images){
for(i=1;i<=3;i++){
img[i] = new Image(); //创建对象实例
img[i].src="data:images/00"+i+".jpg"; //设置所有图片的路径以及名称
}
}
function fort() //定义图片切换函数
{
nums++;
document.images[0].src=img[nums].src;
if(nums==3)
num3=0;
}
function slide() //每隔1秒连续不断地调用fort函数
{
setInterval("fort()",1000);
}
</script>

②:在body标记内,输入代码onLoad=slide()。

利用Javascript制作网页特效(图像特效)的更多相关文章

  1. 利用Javascript制作网页特效(时间特效)

    在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...

  2. 利用Javascript制作网页特效(其他常见特效)

    设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...

  3. 利用Javascript制作网页特效(窗口特效)

    全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...

  4. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  5. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  6. 利用JavaScript制作计算器

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  7. 第九章 利用CSS3制作网页动画

    一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...

  8. 【我们开发有力量之二】利用javascript制作批量网络投票机器人(自动改IP)

    帮朋友忙网络投票,粗粗地看了下,投票没有什么限制,仅有一个ip校验:每天每个ip仅能投票一次. 也就是说,可以写一个程序,自动更换IP地址(伪造IP地址),实现批量刷票的目的.于是我写了一个投票机器人 ...

  9. 利用JavaScript制作简易日历

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

随机推荐

  1. jQuery作业 点击显示

    代码如下: 里: 导入jQuery包: 里:内容 水果 苹果 橘子 梨子 香蕉 化妆品 口红 眼影 腮红 高光 护肤品 水 乳 霜 精华

  2. JavaScript获取页面元素方法

  3. Linux性能优化:CPU性能分析工具--vmstat

    Blog:博客园 个人 目录 参数说明 输出信息说明 procs memory swap io system cpu 示例 vmstat是Virtual Meomory Statistics(虚拟内存 ...

  4. 美团在TIDB方面的实践

    摘自-https://www.v2ex.com/t/508094 一.背景和现状 在美团,基于 MySQL 构建的传统关系型数据库服务已经难于支撑公司业务的爆发式增长,促使我们去探索更合理的数据存储方 ...

  5. 浅谈java中异常处理

    java语言的异常捕获结构是由try.catch.finally,try中语句块是可能发生异常的java语句,catch用来激发捕获的异常,try语句块中如果发生异常,则调到catch语句块中执行ca ...

  6. #2020征文-开发板# 用鸿蒙开发AI应用(一)硬件篇

    目录: 前言 开发板简介 产品特色及功能 产品参数 各个主板功能简介 Hi3516DV300 芯片手册 前言鸿蒙2.0的系统刚开源出来,华为志在打造1+8+N万物互联的全场景智慧生活,不仅是国产操作系 ...

  7. 初学java进制转换方面补充学习

    进制转换: 基础: ​ 二进制用的数为:0/1 ​ 八进制用的数为:0/1/2/3/4/5/6/7 ​ 十进制用的数为:0/1/2/3/4/5/6/7/8/9 ​ 十六进制用的数为:0/1/2/3/4 ...

  8. 大厂面试官竟然这么爱问Kafka,一连八个Kafka问题把我问蒙了?

    本文首发于公众号:五分钟学大数据 在面试的时候,发现很多面试官特别爱问Kafka相关的问题,这也不难理解,谁让Kafka是大数据领域中消息队列的唯一王者,单机十万级别的吞吐量,毫秒级别的延迟,这种天生 ...

  9. python学习笔记 | 顺序表的常规操作

    ''' @author: 人人都爱小雀斑 @time: 2020/3/11 8:46 @desc: 顺序表的相关操作 ''' class SequenceList: def __init__(self ...

  10. [Usaco2007 Dec]宝石手镯

    题目描述 贝茜在珠宝店闲逛时,买到了一个中意的手镯.很自然地,她想从她收集的 N(1 <= N <= 3,402)块宝石中选出最好的那些镶在手镯上.对于第i块宝石,它的重量为W_i(1 & ...