这个知识点其实也简单，（当然是在理清思路的情况下），在没预习的情况下听的还真是艰难，上课以来唯一的一次懵逼了一天，感觉乱乱的，全是新属性，所以今晚的我破天荒的熬夜敲代码，一定要弄懂！

现在就来梳理下头绪：

1、body里面的元素或者图片先构建好，在我们需要对其进行加一些特效的时候，这时候我们就需要用到js中的DOM对象模型；

先获取页面上需要加特效的元素,这里有三种方式,分别是:id(document.getElementById() )  标签 (  document.getElementByTagName())   类名 ( document.getElementByClassName())   .不过类名有浏览器兼容问题,一般不用,除非标签样式需要特殊处理.

2   事件处理

这一步对上一部获取的元素进行特效处理,这时候就需要用到函数了; 注册事件有行内式和内嵌式两种,行内式感觉属性会有点乱,(个人感觉),内嵌式的话简洁明了,一看就懂. 这里举个例子:

内嵌式 :

<body>

<a href="images/1.jpg"><img src="data:images/1-small.jpg"></a>
<a href="images/2.jpg"><img src="data:images/2-small.jpg"></a>
<a href="images/3.jpg"><img src="data:images/3-small.jpg"></a>
<a href="images/4.jpg"><img src="data:images/4-small.jpg"></a>
<a href="images/5.jpg"><img src="data:images/5-small.jpg"></a>

<script>

var img=document.getElementById("img";);
var links=document.getElementsByTagName("a";
for((var i=0;i<links.length;i++){){
    var link=links[i];
    link.onclick=function(){(){
        img.src=this.href;
        return false;
     }
};
    }
}</script>

</body>

行内式:

</head>
<body>
<a href="images/1.jpg" onclick="turn(this);return false;" id="a1"><img src="data:images/1-small.jpg"></a>
<a href="images/2.jpg" onclick="turn(this);return false;" id="a2"><img src="data:images/2-small.jpg"></a>
<a href="images/3.jpg" onclick="turn(this);return false;" id="a3"><img src="data:images/3-small.jpg"></a>
<a href="images/4.jpg" onclick="turn(this);return false;" id="a4"><img src="data:images/4-small.jpg"></a>
<a href="images/5.jpg" onclick="turn(this);return false;" id="a5"><img src="data:images/5-small.jpg"></a>

<img src="data:images/placeholder.png" id="img" width="600">

<script>
    var img= document.getElementById("img");

    function turn(link){){
        img.src=link.href;
    };
    }

</script>

以上就是今天学的重点,多敲了几遍,慢慢补充吧!晚安 .

js中元素（图片）切换和隐藏显示问题的更多相关文章

  1. vue.js中引入图片

    vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...

  2. 在WPF中实现图片一边下载一边显示

    原文 在WPF中实现图片一边下载一边显示 当我们上网查看一个较大的图片时,浏览器能一边下载一边显示,这样用户体验是比较好的,但在WPF程序中,当我们通过如下方式显示一幅图片时: img.Source ...

  3. Android 使用ContentProvider扫描手机中的图片，仿微信显示本地图片效果

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/1873 ...

  4. HTML中动态图片切换JQuery实现

    相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ // ...

  5. Vue.js中的图片引用路径问题

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一: 在data里面定义好图片路径: /*错误写法*/ imgUrl:'../assets/logo.png' 在templat ...

  6. 从零开始学习Node.js例子三 图片上传和显示

    index.js var server = require("./server"); var router = require("./router"); var ...

  7. JS检查当图片不存在时显示默认图片和键盘大小写键状态

    当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...

  8. js中元素更新value页面体现不出来的原因

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS组件系列——图片切换特效：简易抽奖系统

    前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...

随机推荐

  1. Selenium Web 自动化 - 项目持续集成（进阶）

    Selenium Web 自动化 - 项目持续集成(进阶) 2017-03-09 目录 1 背景及目标2 环境配置  2.1 SVN的安装及使用  2.2 新建Jenkins任务3 过程分析 1 背景 ...

  2. Json数据解析在Unity3d中的应用

    最近做项目过程中因为Json文件名写错了一个字母Unity报错,找错误找到半夜,当时为了验错,写了一个小Demo,正好借此总结一下Json. 1.什么是Json JSON(JavaScript Obj ...

  3. Python自动生产表情包

    作为一个数据分析师,应该信奉一句话--"一图胜千言".不过这里要说的并不是数据可视化,而是一款全民向的产品形态--表情包!!!! 表情包不仅仅是一种符号,更是一种文化--是促进社交 ...

  4. ###服务（Service）

    Start服务开启方式 1)   创建服务 public class MyService extends Service 2)   添加注册表 <service android:name=&qu ...

  5. 使用Nginx+CppCMS构建高效Web应用服务器（之二）

    使用Nginx+CppCMS构建高效Web应用服务器(之二) 上一篇 使用Nginx+CppCMS构建高效Web应用服务器(之一) 大致介绍了网站的整体架构,实际上通过调用REST获取数据并没有实现. ...

  6. X64系统下IIS运行ASP网站HTTP500错误 【安装FoxMail Server时出现】

    错误如上 解决办法 使用管理员模式运行CMD 输入cscript C:\inetpub\adminscripts\adsutil.vbs SET W3SVC/AppPools/Enable32bitA ...

  7. css动画特效与js动画特效（一）------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

  8. java学习笔记 --- StringBuffer类

    1.定义:字符串缓冲区,即它是一个容器,容器中可以装很多字符.并且能够对其中的字符进行各种操作. StringBuffer的特点: 1.是一个字符串缓冲区,其实就是一个容器. 2.长度是可变,任意类型 ...

  9. (转)CentOS下一键安装GitLab

    [环境准备]OS: CentOS 6.3 x86_64 [安装要求]如果有条件,提供一台全新的Server(仅仅只安装了一些系统的软件包),可以直接使用一键安装脚本(gitlab-install-el ...

  10. PRINCE2有用吗？

    PRINCE2项目认证--在欧美国际久负盛名,在国内近来才逐渐为业内人士所了解.PRINCE2认证2007年首入中国,目前国内参加培训并获取认证的专业人士不足五万人,PRINCE2全称为"受 ...