js实现点小图看大图的效果

最新推荐文章于 2022-01-05 15:48:28 发布

KandyDev

最新推荐文章于 2022-01-05 15:48:28 发布

阅读量1.2k

点赞数 1

分类专栏： HTML+CSS+JS 文章标签： JavaScript HTML CSS 黑马程序员

本文链接：https://blog.csdn.net/kj297296053/article/details/13164841

版权

HTML+CSS+JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

KandyDev

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现点小图看大图的效果

DOM：就是用JavaScript操作HTML节点。知识点：=》将HTML变成DOM树看到HTML会画DOM树。 =》创建节点，添加节点，删除节点 varnodeObj = document.createElement(“节点名”); //创建元素节点 document.createTex
复制链接

扫一扫

专栏目录