js实现点小图看大图效果的思路及示例代码

前端技术 2023/09/01 JavaScript
DOM：就是用JavaScript操作HTML节点。

知识点：

将HTML变成DOM树

看到HTML会画DOM树。

创建节点，添加节点，删除节点

varnodeObj = document.createElement(“节点名”); //创建元素节点

document.createTextNode(“文本”); //创建文本节点

父节点.appendChild(子节点); //把子节点添加到父节点下

父节点.removeChild(子节点);

//获得节点

document.getElementById(“id号”);

document.getElementsByTagName(“html的标签名”)[0];

父节点.getElementsByTagName(“html的标签名”)[0];

//获得子元素的节点

父节点.childNodes

父节点.firstChild

父节点.lastChild

//节点的属性

nodeType 1元素节点 2属性节点 3文本节点

nodeName 元素节点使用，返回标签名的大写字符串

nodeValue 文本节点使用，返回或设置文本

//获得兄弟节点

当前节点.nextSiblings

设置节点的属性

节点.setAttribute(属性名,值);

节点.getAttribute(属性名);

p.setAttrubute(“style”,”color:red;font-size:20px;”);

//一般做法，可以设置或获取

节点.属性名

设置文本

文本节点.nodeValue=文本;

案例：点击小图看大图
复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title></title>
<meta charset=\"gb2312\" />
<style type=\"text/css\">
body{
background-color:pink;
}
#div{
/*border:1px solid green;*/
margin:40px auto;
width:900px;
}
#ul li{
float:left;
margin-right:10px;
list-style-type:none;
}
p{
background-color:silver;
width:50%;
margin:0 auto;
top:10px;
text-align:center;
}
#divShow{
/*border:1px solid red;*/
width:640px;
height:400px;
margin:10px auto;
clear:both;
}
</style>
</head>
<body>
<div id=\"div\">
<ul id=\"ul\">
<li>
<a href=\"imgs/0.jpg\">
<img src=\"imgs_small/0.jpg\" title=\"图片111\"></img>
</a>
</li>
<li>
<a href=\"imgs/1.jpg\">
<img src=\"imgs_small/1.jpg\" title=\"图片222\"></img>
</a>
</li>
<li>
<a href=\"imgs/2.jpg\">
<img src=\"imgs_small/2.jpg\" title=\"图片333\"></img>
</a>
</li>
<li>
<a href=\"imgs/6.jpg\">
<img src=\"imgs_small/6.jpg\" title=\"图片444\"></img>
</a>
</li>
<li>
<a href=\"imgs/4.jpg\">
<img src=\"imgs_small/4.jpg\" title=\"图片555\"></img>
</a>
</li>
</ul>
</div>
</body>
</html>
<script type=\"text/javascript\">
//创建一个div节点
var divShow = document.createElement(\"div\");
//设置div的id属性
divShow.setAttribute(\"id\",\"divShow\");
//创建一个img节点
var img = document.createElement(\"img\");
//设置img的id属性
img.setAttribute(\"id\",\"img\");
//设置img的src属性
img.setAttribute(\"src\",\"imgs/face.jpg\");
//将img节点添加到div下
divShow.appendChild(img);
//创建文本说明标签p
var p = document.createElement(\"p\");
p.setAttribute(\"id\",\"p\");
p.appendChild(document.createTextNode(\"说明\"));

//得到HTML中的body节点
var body = document.getElementsByTagName(\"body\")[0];
//将div添加到body节点下
body.appendChild(divShow);
body.appendChild(p);//把p添加到body下


//为元素添加单击事件
//节点对象.事件名 = new function(){};

//得到所有的<a>标签
var alist = document.getElementById(\"div\").getElementsByTagName(\"a\");

for(var i = 0;i < alist.length; i++){
//当鼠标点击时切换图片
alist[i].onclick = function(){
//this就表示当前被点击的节点
//点谁获得谁的href和title的值
var href = this.getAttribute(\"href\");
var img = this.getElementsByTagName(\"img\")[0];
var title = img.getAttribute(\"title\");

//修改img标签的src属性
var img = document.getElementById(\"img\");
img.setAttribute(\"src\",href);

//修改p标签的文本
var p = document.getElementById(\"p\");
p.firstChild.nodeValue=title;

//取消<a>标签的跳转
return false;
}

//当鼠标称上去的时候切换图片
alist[i].onmousemove = function(){
//this就表示当前被点击的节点
//点谁获得谁的href和title的值
var href = this.getAttribute(\"href\");
var img = this.getElementsByTagName(\"img\")[0];
var title = img.getAttribute(\"title\");

//修改img标签的src属性
var img = document.getElementById(\"img\");
img.setAttribute(\"src\",href);

//修改p标签的文本
var p = document.getElementById(\"p\");
p.firstChild.nodeValue=title;

//取消<a>标签的跳转
return false;
}
}
</script>

本文地址：https://www.stayed.cn/item/1433

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案