网页切换图片特效

网页特效多种多样,今天小编我就来给大家分享一下网页中鼠标经过图片切换的特效。

操作方法

  • 01

    首先,新建一个HTML文件,和一个文件夹,这个文件夹我命名为img。HTML文件和img要在同一个目录下哦。

  • 02

    然后我们在img文件夹里面存放图片,这里我就存放好两张图片,分别是1.png和2.png。

  • 03

    然后在hbuilder里面编写代码,添加一个img标签,然后里面链接一张图片,这里我就链接1.png。

  • 04

    然后再给这个img标签添加一个id,这里我就给id起名为“images”。

  • 05

    接着预览效果,记住现在是一张红色图片。

  • 06

    然后我们通过getElementById的方法来获取这个img标签。

  • 07

    然后给找到的这个img元素绑定一个鼠标移动事件onmouseover。

  • 08

    然后添加响应的js代码,这样,当鼠标移动进入指定的img元素时,图片就会自动变为2.png。

  • 09

    移入事件写完之后,还要再写一个鼠标移出事件,这就需要用到onmouseout了。

  • 10

    之后,再书写JavaScript代码,当我们的鼠标移出图片时,图片自动变换为1.png。

  • 11

    保存之后,鼠标经过图片切换特效就完成了哦。这样当我们鼠标经过图片的时候,原来的图片就会变换,而鼠标离开之后,图片又会变换回原来的样子。

(0)

相关推荐

  • 美图秀秀网页版全新特效介绍

    美图秀秀网页版是美图秀秀图片处理软件的在线版,简单易用,独有的图片特效、人像美容、拼图、场景、边框、饰品等功能可以使您的图片获得绝妙的效果。现在最新的美图秀秀网页版,加入了更多的美图特效,而且还特别对 ...

  • 美图秀秀网页版全新特效 在线使用更省心

    美图秀秀网页版(http://xiuxiu.web.meitu.com/)是美图秀秀图片处理软件的在线版,简单易用,独有的图片特效、人像美容、拼图、场景、边框、饰品等功能可以使您的图片获得绝妙的效果。 ...

  • Win7系统下浏览网页时图片显示不出来怎么办?

    Win7系统下,我们经常会使用浏览器来浏览一些站点查看图片,但近日有网友在访问一些站点的时候出现了网页图片显示不出来的情况,出现这种情况有时候是电脑网速慢,图片加载不成功导致,有时候是由于用户浏览器设 ...

  • DW制作九宫格全屏亮灯轮播图片且自动切换图片教程

    本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 方法/步骤 1.打开Adobe Dreamweaver,新建一个网页.然后在& ...

  • Dreamweaver学习:[11]鼠标经过更换图片特效

    鼠标经过更换图片特效是指在网页中先显示一张图片,当鼠标移动到这张图片时,图片更换为另一种图片的效果.一起学习如何实现这个效果. 操作方法 01 在网站文件夹放入两种图片,一张是之前显示的图片,一张是鼠 ...

  • 解决网页中图片显示不出来的方法

    最近一朋友跟我说他在浏览网页的时候,总是会遇到网页的图片不能显示,图片上面会有一个红色的叉,重新刷新了好几遍也还是一样,想必也有很多人遇到了这样的问题吧,那么要怎么办呢?跟大家分享一下解决网页中图片显 ...

  • 会声会影遮罩图片特效案例制作

    从某种角度来说,在会声会影中,转场就是一种特殊的滤镜效果,它可以再两个图像或视频素材之间创建某种过渡效果,运用转场效果,可以让素材之间的过渡效果更见生动、美丽。现在我们就来学习会声会影教程:遮罩图片特 ...

  • chrome浏览器保存整个网页为图片的设置方法

    Chrome是一款非常受欢迎的浏览器,在使用浏览器的时候经常需要将整个网页进行截图,360浏览器可以直接将网页保存网页保存为图片,但是对于Chrome浏览器来说,不少人还不知道怎样截图完整的网页图片, ...

  • 抖音如何制作宫格手势舞图片特效

    抖音是一款很火的App,它可以拍短视频并分享,深受大家喜爱,可是,不少朋友们不知道怎么制作宫格手势舞图片特效.话不多说,小编今天为您呈上解决这个问题的方法.具体如下:1. 顺序,请大家点击手机里的&q ...