javascript/js匹配和图片的相互替换

我们先看看JS代码和效果图

代码如下：

按F12预览效果图如下：

点击“灯泡”，“灯泡”的关闭和打开会进行切换，从而达到图片切换的目的！

下面我们来讲解下这个JS：

JS部分：

<script>
function yue()//申明一个JS方法叫yue()
{var x=document.getElementById("yueying");//获取文档中id为yueying的标签if(x.src.match("images/off.png"))//x的图片的路径和“images/off.png”进行匹配，如果yueying的原路径也是“images/off.png”，匹配成功，那么就执行if语句内的函数，将x的路径改为x.src="data:images/on.png",从而替换掉了以前的路径{x.src="data:images/on.png";}else//如果if条件没有匹配成功，那么就执行else里面的函数！，同理！从而达到了图片可以交换替换的效果！{x.src="data:images/off.png";}
}
</script>

代码部分：

<h3><a href="http://www.yydpt.com" title="月影web" target="_block">月影web</a></h3>
<img src="data:images/off.png" id="yueying" onclick="yue()" />

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；

javascript/js匹配和图片的相互替换相关推荐

js获取html中img src属性值,javascript - js匹配img标签中的 src属性的值的正则怎么写？...
伊谢尔伦2017-04-11 12:54:453楼不好意思,JS这部分我现在也是自己学,误会了你的意思.我去查了一下,有这样一个思路,你先匹配出img,然后再从中匹配出src var str = & ...
html5 图片局部马赛克,javascript - JS实现马赛克图片效果完整示例
主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下本文实例讲述了JS实现马赛克图片效 ...
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
java web之javascript(js)解析
java web javascript(js): javascript(js): js嵌入在html中,在浏览器中运行的脚本语言 js跟java没有任何关系,只是语法相似是一 ...
循环匹配出图片地址（即src属性）
<script type="text/javascript"> //思路分两步:作者(yanue). //1,匹配出图片img标签(即匹配出所有图片),过滤其他不需要的 ...
利用 JS 判断页面图片静态资源链接是否有效是否加载完成
文章目录一.功能说明二.动图效果展示三.完整源代码一.功能说明利用原生 JS 实现对图片静态资源链接是否有效进行判断: 如果资源链接有效,直接渲染: 如果资源链接失效,3秒后替换新的链接,进 ...
WebView与JS的那些事：注入JS提取页面图片
上一篇博文中,我们大概了解了js与webview的一些交互,然而,在我们实际的应用中,更倾向于在android端对网页做一些处理,今天带给大家的是往页面注入JS脚本,提取页面上的图片,然后通过另一个A ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...

javascript/js匹配和图片的相互替换

javascript/js匹配和图片的相互替换相关推荐

最新文章

热门文章