JS - 事件 - 小例子之关闭小广告+切换图片

最新推荐文章于 2022-03-12 10:56:37 发布
最新推荐文章于 2022-03-12 10:56:37 发布
阅读量232 收藏
点赞数
分类专栏： web前端 - JavaScript JavaScript学习指南
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37580235/article/details/80756865
版权

1. 关闭小广告

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS</title>
    <style>#icon { width: 250px; top: 20px; left: 20px; position: relative; } #close{ width: 40px; position: absolute; top: 26px; left: 238px; cursor: pointer; }</style></head>
  
  <body>
    <div id="box">
      <img id="icon" src="icon.jpg" alt="图片">
      <img id="close" src="close.jpg" alt="图片">
    </div>
    <script type="text/javascript">
        //1.获取事件源
        var box = document.getElementById("box");
        var close = document.getElementById("close");

        close.onclick = function() {
           box.style.display = "none";
        }
     </script>
  </body>
</html>

切换图片

<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS</title>
</head>
  
  <body>
    <img id="logo" src="icon.jpg" alt="图片" width="250px">
    <script type="text/javascript">
        //1.获取事件源
      var logo = document.getElementById("logo");

      //2.绑定事件
      logo.onmouseover = function() {
        console.log("鼠标进入图片");
        logo.src = "icon-2.jpg";
      }

      logo.onmouseout = function() {
        console.log("鼠标离开图片");
        logo.src = "icon.jpg";
      }
    </script>
  </body>
</html>



一只前端小菜鸟~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS实现关闭小广告特效
11-28
本文实例为大家分享了JS实现关闭小广告特效的具体代码，供大家参考，具体内容如下 知识点 1、获取元素 2、通过元素获取父元素 3、删除节点 4、设置元素隐藏 运行效果 直接删除 隐藏 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ height: 200px; width: 200px; position: relative; display: inline-
JavaScript事件示例
cnds123的专栏
09-28 386
JavaScript事件介绍 HTML 事件(Events)是发生在 HTML 元素（也称为DOM元素）上的“事情”。换句话说，很多DOM元素可以被设计接收(或者监听) 这些事件, 并且执行代码去响应（或者处理）它们。 当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件——HTML 允许您向 HTML 元素添加事件处理JavaScript程序，通过事件及其处理程序，能够为最终用户提供更具交互性的Web体验。 为响应事件而调用的一段JavaScrip
js关闭广告
weixin_45097456的博客
09-27 2277
<style> #bx1{ height: 500px; background: url(img/01.jpg)no-repeat; position: relative; } #bx2{ width: 100px; height: 100px; position: absolute; left: 400px; ...
js小案例
北街lhy的博客
07-09 760
今日所学摘要：①js说明事件，话不多说，上代码，可直接运行&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;title&gt;说明事件&lt;/title&gt;        &lt;style type="text/css&q
javascript事件实例
weixin_46540009的博客
03-21 110
javascript事件实例 在javascript中存在一个对象Event 事件对象 代表事件的状态 一、onblur 元素失去焦点 二、Onchange表示域的值发生变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript">
JavaScript小例子
01-07
这个是之前学习做毕设和实习时自学JS时用到的例子，比较实用，有可关闭对联广告（多个，不同的效果）、精美日历、多图切换、JS显示时间特效、多滚动循环新闻列表、随机显示广告图片、QQ在线客服、自动弹出信息的在线...
学习jQuery挺有用的小例子打包下载
05-12
内容索引:脚本资源,jQuery,弹出层,jQuery例子　本压缩包内收集了大家学习jQuery挺有用的一些小例子，都是平时容易单行滚动用到的技巧，比如经典弹出层菜单、jQuery弹出层、顶部导航、收缩展开效果、图片切换，带标题...
java源码包---java 源码 大量 实例
04-18
有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以改进做成小工具。 Java右键弹出...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69.一款jquery实现图片放大插件imgBox下载 70.一款jQuery实现漂亮精美相册插件源码 71.一款jQuery左右箭头控制大图滚动切换的代码 72....
成百上千个Java 源码DEMO 4(1-4是独立压缩包)
03-29
有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以改进做成小工具。 Java右键弹出...
js的案例
xiaozhegaa的博客
12-10 1798
为了方便大家，我把代码打包上传到我的资源，大家可以去下载后部署到自己的网站上去，这样就不用你来copy代码了，免费下载哦，下面的代码都是从打包的源码中截取出来的额。2017/3/18有更新下载网址：http://download.csdn.net/detail/xiaozhegaa/9783956 ## 新开一个窗口：可以选择窗口中的属性window.html <body> 姓名
js学习笔记（事件小案例）
dawanhjiao的博客
02-19 157
案例1：图片切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style type="text/css"> .box{ widt...
js事件以及案例
shaco335的博客
03-12 1017
目录 onload 页面加载事件 onresize 改变窗口大小时触发事件 onscroll滚动条事件 表单事件 键盘事件 鼠标事件 事件绑定 冒泡事件 捕获事件案例 onload 页面加载事件 window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码}; 案例： <img src="images/lo
js常用事件总结及案例-onFocus、onBlur
成长日记的博客
05-26 1955
事件是可以被javascript侦测到的行为（时间通常与函数配合使用，当事件发生时函数才会执行） 事件可以分为如下几大类：鼠标点击、页面或图像载入、鼠标悬浮于页面的某个热点上、在表单中选取输入框、确认表单、键盘按键 常见事件函数：onFocus、onBlur、onChange、onSubmit、onMouseover、onMouseOut 案例一：onFocus、onBlur   $(
js基础4关闭小广告
qq_43607916的博客
09-26 364
关闭小广告 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>关闭小广告</title> <style type="text/css"> *{ padding: 0; margin: 0; } #qecode{ width: 190px; height: 160px; position
JS效果日记（四）——关闭小广告
qq_45842320的博客
12-02 143
JS效果日记（四） ——关闭小广告 简单易懂上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #box { /* 因为图片大小是400x400所以盒子宽度有预留哦 */ width: 420px
JS常用事件及实例
RenOuQ的博客
03-15 192
js 鼠标事件 onclick：点击某个对象时触发 ondblclick：双击某个对象时触发 onmouseover：鼠标移入某个元素时触发 onmouseout：鼠标移出某个元素时触发 onmouseenter：鼠标进入某个元素时触发 onmouseleave：鼠标离开某个元素时触发 onmousedown：鼠标按下时触发 onmouseup：鼠标抬起时触发 onmousemove：鼠标被移动时...
HTML怎么编写可关闭广告,JS实现关闭小广告特效
weixin_39990819的博客
06-22 694
本文实例为大家分享了JS实现关闭小广告特效的具体代码，供大家参考，具体内容如下知识点1、获取元素2、通过元素获取父元素3、删除节点4、设置元素隐藏运行效果直接删除隐藏代码Title#box{height: 200px;width: 200px;position: relative;display: inline-block;}#box>#icon{height: 100%;width: 10...
在vue中使用plotly.js-with-locales的例子
最新发布
07-08
当然，我可以为您提供一个在Vue中使用Plotly.js-with-locales的例子。首先，确保您已经安装了Plotly.js和Vue。然后，您可以按照以下步骤进行操作： 1. 在您的Vue项目中安装`plotly.js-with-locales`包： ```bash ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只前端小菜鸟~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值