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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
跟我学习javascript的循环
Nov 18 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
php生成excel文件的简单方法
2014/02/08 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
详细讲解Python中的文件I/O操作
2015/05/24 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python和JavaScript哪个容易上手
2020/06/23 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
租房协议书范本
2014/04/09 职场文书
三方协议书范本
2014/04/22 职场文书
小小商店教学反思
2014/04/27 职场文书
大学生交通专业求职信
2014/09/01 职场文书
行政前台岗位职责
2015/04/16 职场文书
班级管理经验交流材料
2015/11/02 职场文书
关于python中模块和重载的问题
2021/11/02 Python