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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
Bootstrap输入框组件使用详解
2017/06/09 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
python3爬虫之设计签名小程序
2018/06/19 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
党校培训思想汇报
2014/01/03 职场文书
食堂个人先进事迹
2014/01/22 职场文书
就业协议书的作用
2014/04/11 职场文书
演讲稿格式范文
2014/05/19 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
珍爱生命主题班会
2015/08/13 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python