利用Javascript制作网页特效(图像特效)
图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力。
当鼠标指针经过图像时图像振动效果
①:在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制作网页特效(图像特效)的更多相关文章
- 利用Javascript制作网页特效(时间特效)
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
- 利用Javascript制作网页特效(其他常见特效)
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...
- 利用Javascript制作网页特效(窗口特效)
全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
- 利用JavaScript制作计算器
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- 第九章 利用CSS3制作网页动画
一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...
- 【我们开发有力量之二】利用javascript制作批量网络投票机器人(自动改IP)
帮朋友忙网络投票,粗粗地看了下,投票没有什么限制,仅有一个ip校验:每天每个ip仅能投票一次. 也就是说,可以写一个程序,自动更换IP地址(伪造IP地址),实现批量刷票的目的.于是我写了一个投票机器人 ...
- 利用JavaScript制作简易日历
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
随机推荐
- jQuery作业 点击显示
代码如下: 里: 导入jQuery包: 里:内容 水果 苹果 橘子 梨子 香蕉 化妆品 口红 眼影 腮红 高光 护肤品 水 乳 霜 精华
- JavaScript获取页面元素方法
- Linux性能优化:CPU性能分析工具--vmstat
Blog:博客园 个人 目录 参数说明 输出信息说明 procs memory swap io system cpu 示例 vmstat是Virtual Meomory Statistics(虚拟内存 ...
- 美团在TIDB方面的实践
摘自-https://www.v2ex.com/t/508094 一.背景和现状 在美团,基于 MySQL 构建的传统关系型数据库服务已经难于支撑公司业务的爆发式增长,促使我们去探索更合理的数据存储方 ...
- 浅谈java中异常处理
java语言的异常捕获结构是由try.catch.finally,try中语句块是可能发生异常的java语句,catch用来激发捕获的异常,try语句块中如果发生异常,则调到catch语句块中执行ca ...
- #2020征文-开发板# 用鸿蒙开发AI应用(一)硬件篇
目录: 前言 开发板简介 产品特色及功能 产品参数 各个主板功能简介 Hi3516DV300 芯片手册 前言鸿蒙2.0的系统刚开源出来,华为志在打造1+8+N万物互联的全场景智慧生活,不仅是国产操作系 ...
- 初学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 ...
- 大厂面试官竟然这么爱问Kafka,一连八个Kafka问题把我问蒙了?
本文首发于公众号:五分钟学大数据 在面试的时候,发现很多面试官特别爱问Kafka相关的问题,这也不难理解,谁让Kafka是大数据领域中消息队列的唯一王者,单机十万级别的吞吐量,毫秒级别的延迟,这种天生 ...
- python学习笔记 | 顺序表的常规操作
''' @author: 人人都爱小雀斑 @time: 2020/3/11 8:46 @desc: 顺序表的相关操作 ''' class SequenceList: def __init__(self ...
- [Usaco2007 Dec]宝石手镯
题目描述 贝茜在珠宝店闲逛时,买到了一个中意的手镯.很自然地,她想从她收集的 N(1 <= N <= 3,402)块宝石中选出最好的那些镶在手镯上.对于第i块宝石,它的重量为W_i(1 & ...