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

发布于 2017-01-14 00:16:30 | 138 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

点小图看大图的效果想必很多的朋友都有见到过吧，下面有个不错的示例，感兴趣的朋友可以参考下
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>

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

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他