本文实例为大家分享了javascript实现点击小图显示大图的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style> </head> <body> <h2> 美女画廊 </h2> <ul id="imagegallery"> <li> <a href="images/1.jpg" rel="external nofollow" title="美女A"> <img src="images/1-small.jpg" width="100" alt="美女1"/> </a> </li> <li><a href="images/2.jpg" rel="external nofollow" title="美女B"> <img src="images/2-small.jpg" width="100" alt="美女2"/> </a></li> <li><a href="images/3.jpg" rel="external nofollow" title="美女C"> <img src="images/3-small.jpg" width="100" alt="美女3"/> </a></li> <li><a href="images/4.jpg" rel="external nofollow" title="美女D"> <img src="images/4-small.jpg" width="100" alt="美女4"/> </a></li> </ul> <div style="clear:both"></div> <!--显示大图的--> <img id="image" src="images/placeholder.png" alt="" width="450"/> <p id="des">选择一个图片</p> <script> // 获取ul元素对象 var imagegallery = document.getElementById("imagegallery") // 获取a元素 数组 var a = imagegallery.getElementsByTagName("a") // 获取大图元素对象 var image = document.getElementById("image") // 获取p标签 var des = document.getElementById("des") // console.log(imagegallery,a) // 遍历数组元素为每一个a链接注册点击事件 for(var i = 0; i < a.length; i++){ a[i].onclick = function(){ // 将a链接中的href中的值赋值给大图的src属性 image.src = this.href // 将a链接中的title的值作为内容赋值给p标签 des.innerHTML = this.title return false } } //点击a标签,把a标签中的href的属性值给id为image的src属性 //把a的title属性的值给id为des的p标签赋值 //阻止超链接默认的跳转 // return false; </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
虽然大部分使用Zabbix的用户是放在内网,但是该掌握的还是需要的,万一要用到了...
什么是sql注入 SQL注入是服务器端未严格校验客户端发送的数据,而导致服务端SQL语...
大家在使用ASP.NET的时候一定都用过FormsAuthentication做登录用户的身份认证,F...
最近有人问我:我该如何在Startup类之外的地方注入我的服务呢,都写在startup里...
文章目录 链表介绍 初始化链表 打印单链表 增加结点 单链表的头插 单链表的尾插 ...
abstract 路由模式 abstract 是vue路由中的第三种模式,本身是用来在不支持浏览...
今天给大家分享计算地球上两个坐标点之间里程不同数据库版本的脚本。 1、SQLServ...
时间戳作用 客户端在向服务端接口进行请求,如果请求信息进行了加密处理,被第三...
在上云之前,企业通常会有数据库管理员(DBA)和数据库专家团队,他们的主要职责是...
今天写个jsp页面,乍么调来调去div style=margin:0 auto123xxx/div 这个属怎么弄...