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 相关文章推荐
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
Javascript中parseInt的正确使用方式
Oct 17 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php使用百度天气接口示例
2014/04/22 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
详解JS函数stack size计算方法
2018/06/18 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
简单介绍Python中的struct模块
2015/04/28 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
假释思想汇报范文
2014/10/11 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2014年团支部工作总结
2014/11/17 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL