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


Posted in Javascript onOctober 28, 2013

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>
Javascript 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
vue实现div单选多选功能
Jul 16 Javascript
javascript:void(0)的作用示例介绍
Oct 28 #Javascript
jsonp原理及使用
Oct 28 #Javascript
JS实现一键回顶功能示例代码
Oct 28 #Javascript
简单的js表单验证函数
Oct 28 #Javascript
自己写的Javascript计算时间差函数
Oct 28 #Javascript
Textarea根据内容自适应高度
Oct 28 #Javascript
将json当数据库一样操作的javascript lib
Oct 28 #Javascript
You might like
多人战的战术与战略
2020/03/04 星际争霸
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
vue实现通讯录功能
2018/07/14 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
Python socket编程实例详解
2015/05/27 Python
python实现计算倒数的方法
2015/07/11 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python快排算法详解
2019/03/04 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
html5录音功能实战示例
2019/03/25 HTML / CSS
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
一组SQL面试题
2016/02/15 面试题
考试没考好检讨书
2014/01/31 职场文书
年终考核实施方案
2014/05/26 职场文书
信用卡工资证明格式
2014/09/13 职场文书
python基础之函数的定义和调用
2021/10/24 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL