html借助JS简单实现图片闪烁功能

图片闪烁

功能：

点击按钮，实现图片闪烁

效果如图：

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片闪烁</title></head><body><button id="flash" style=" background: mediumvioletred; color: aqua; height: 40px;">图片闪烁</button><img id="img" src="img/BJN1.jpg" ></body><script type="text/javascript">var img =document.getElementById("img");var flash_btn = document.getElementById("flash");//设置按钮触发事件flash_btn.addEventListener("click",function(){//调用setInterval()函数,每隔0.25秒隐藏setInterval(function(){img.style.opacity = 0;  //图片隐藏},250)//再次调用setInterval()函数,每隔0.5秒显示 时间差就可以形成图片闪烁功能;setInterval(function(){img.style.opacity = 1;  //图片显示},500)})</script>
</html>

html借助JS简单实现图片闪烁功能相关推荐

html中实现添加水印的功能,JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
关于JS如何实现图片闪烁
关于JS如何实现图片闪烁 <script> function img(){//按钮闪烁//获取元素设置其CSSimgbox.style.display=imgbox.style.displ ...
Unity简单实现图片墙功能
Unity简单实现图片墙功能前言在做之前公司的项目中,我做过很多实现照片墙效果的功能.其中我觉得我做的效果比较好而且比较有难度的就是雀巢项目中的那个仿照apple watch拖拽效果实现的那个照片 ...
js技术实现图片放大镜功能
利用idea软件 js技术实现图片放大功能第一步准备图片将要放大图片放大 web 下第二步具体实现代码 <%@ page contentType="text/html;cha ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
html js简单实现图片轮播功能
本章记录简单的图片轮播功能,需要html.js和css共同实现1.html文件 <!DOCTYPE html> <html><head><meta chars ...
运用js简单制作图片的左右移动
今天用js制作简单的图片左右移动的功能,并且当点击按钮,图片自己移动,当鼠标放上图片的时候,图片会停下来,当把鼠标移开的时候,图片会再次自己移动. 首先做简单的css的东西,设置盒子,按钮,长宽,图片 ...
老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...

html借助JS简单实现图片闪烁功能

图片闪烁

html借助JS简单实现图片闪烁功能相关推荐

最新文章

热门文章