js中元素（图片）切换和隐藏显示问题

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

现在就来梳理下头绪：

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

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

2 事件处理

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

内嵌式 :

<body>

var img=document.getElementById("img";);var links=document.getElementsByTagName("a";

for((var i=0;i<links.length;i++){){    var link=links[i];    link.οnclick=function(){(){        img.src=this.href;        return false;     }};    }}</script>

</body>

行内式:

</head><body><a href="images/1.jpg" οnclick="turn(this);return false;" id="a1"><img src="data:images/1-small.jpg"></a><a href="images/2.jpg" οnclick="turn(this);return false;" id="a2"><img src="data:images/2-small.jpg"></a><a href="images/3.jpg" οnclick="turn(this);return false;" id="a3"><img src="data:images/3-small.jpg"></a><a href="images/4.jpg" οnclick="turn(this);return false;" id="a4"><img src="data:images/4-small.jpg"></a><a href="images/5.jpg" οnclick="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>

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

转载于:https://www.cnblogs.com/lzc521/p/5743211.html

js中元素（图片）切换和隐藏显示问题相关推荐

js中的图片指定切换效果
js中的图片指定切换效果的实现用到的js中的知识:js中的for循环的熟练运用 js中的this属性:指的是调用当前方法 (函数) 的那个对象 js中的自定义属性:js可以为任意的HTML元素添加 ...
js 中数字小数点末尾的0显示与否
js 中数字小数点末尾的0显示与否不显示0 显示0(数字格式化) 不显示0 我们先来看一道例题,然后围绕其展开"零"的讨论: 问题:得到一个随机数组成的数组,数组长度为10 结果 ...
在PB中存图片入数据库及显示图片
在PB中存图片入数据库及显示图片摘自:http://www.xicc.cn/User0/109/Show.asp?/_articleid/549.html 1.选择图片 string ls_path ...
Word中的图片设置嵌入式之后显示不全问题
问题:Word中的图片设置嵌入式之后显示不全原因:行间距设置为了固定值解决: 设置图片为嵌入式,然后将显示不全的图片剪切掉(Ctrl+X). 回车到新的一行. 打开段落,设置行间距为单倍行距. 重 ...
HTML使svg整体自适应网页变化、以元素颜色填充、隐藏显示
HTML使svg整体自适应网页变化.以元素颜色填充.隐藏显示 1.如下所示 $(function () {//使SVG的所有元素自适应大小let svg = document.getElementsB ...
126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
Word中插入图片不按原始大小显示的问题
Word中插入图片不按原始大小显示的问题怎样设置Word文档图像的默认输出分辨率
php 输出图片变叉,想把数据库中的图片取出并自动显示！但得到的却是红叉叉！哪位大哥给看看谢谢！...
想把数据库中的图片取出并自动显示!但得到的却是红叉叉!哪位大哥给看看谢谢! 本脚本目的是把数据库中的图片取出并自动显示出来,可是我每次得到的却是很多红叉叉,有哪位大大好人帮我看看.这问题困人好久了, ...
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素.例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来.对于这类元素显示隐藏的操作,应该如何实 ...

js中元素（图片）切换和隐藏显示问题

js中元素（图片）切换和隐藏显示问题相关推荐

最新文章

热门文章