js实现点小图看大图效果的思路及示例代码
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>
相关推荐
-
asp.net下用js实现鼠标移至小图，自动显示相应大图
实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 .Net精简版本 <script language="JavaScript"> function GetShowImg(imgfile) { document.all("ShowImage").src = "/semir/images/"+ imgfile; } </script> //DataList绑定 <asp:datalist id="DlSi
-
js点小图显示大图的切换功能代码
javascript点小图出大图 练习 by 阿会楠 body{ text-align:center; margin:0 auto; } #imgList li img{ width:80px; height:80px; border:1px solid #cccccc; } ul li{ list-style:none; float:left; margin-left:20px; cursor:pointer; } .rborder{ border:1px solid yellow; } va
-
js实现点小图看大图效果的思路及示例代码
DOM:就是用JavaScript操作HTML节点. 知识点: 将HTML变成DOM树 看到HTML会画DOM树. 创建节点,添加节点,删除节点 varnodeObj = document.createElement("节点名"); //创建元素节点 document.createTextNode("文本"); //创建文本节点 父节点.appendChild(子节点); //把子节点添加到父节点下 父节点.removeChild(子节点); //获得节点 docu
-
基于jQuery插件实现点击小图显示大图效果
本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下 显示以下效果: 点击任意一张图片会显示大图: 1.前台界面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="练习.WebForm1" %> <!DOCTYPE html PUBLIC "-/
-
JQuery鼠标移到小图显示大图效果的方法
本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠标提示效果的方法>,稍微修改一下代码,就可以做出一个图片的提示效果. 参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为: //创建 div 元素 图片提示 var tooltip = "<div id="tooltip"><img src=""+ this.hr
-
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码.分享给大家供大家参考.具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢.所用技术是JS和CSS. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
Qt 实现画线笔锋效果详细原理及示例代码
前言 之前写过一篇文章介绍Qt中绘制平滑曲线的两种方式,文章在这里.这篇文章详细介绍了绘制的原理和实现方式,那么,如果要在此曲线上实现笔锋效果怎么做呢? 所谓的笔锋效果,就是钢笔书写抬笔时的笔尖,也就是说,绘制曲线抬笔时形成一个笔尖的效果. 话不多说,直接来看效果: 动画效果如下: 实现原理 要实现该效果,需要完成以下几个关键步骤: 1.每两个点形成一个贝塞尔曲线path进行绘制 2.最新的一条path绘制细线(笔锋最细处的宽度) 3.倒数第二条path绘制粗线(正常的线条宽度) 4.在两条pa
-
js 实现复选框只能选择一项的示例代码
实例如下所示: <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <ul> <li><input type="checkbox" name="ss" onclick="choose(this)">1</li> <li><inpu
-
原生Js 实现的简单无缝滚动轮播图的示例代码
简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码. 原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
-
JS和Jquery获取和修改label的值的示例代码
获取值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 复制代码 代码如下: var label=document.getElementById("id"); var value=label.value; var value=$("#id").val(); 可以这样: JS: 复制代码 代码如下: var label=document.getElementById("id"); var value=label
-
用PHP代替JS玩转DOM的思路及示例代码
事情的起源比较简单,我需要把一个导航页的数据整理好写入数据库.一个比较直观的方法是对html文件进行分析,通用的方法是用php的正则表达式来匹配.但是这样做开发和维护都很困难,代码可读性非常差. 导航页的数据都是规则的排列在DOM树当中的,用JS可以用几个循环轻松的对其进行操作,而且JS需要依赖浏览器,操作数据库很困难.其实PHP就有现成的类库对DOM树种的节点进行增删改查操作,在此做一些笔记. 这里涉及到2个类 DOMDocument 和 DOMXPath. 其实思路比较明确,就是通过DOMD
-
js 点击页面其他地方关闭弹出层(示例代码)
复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- *{font-size:12px;font-family:Verdana, Gen