JS 实现点击图片查看大图（含注释）

代码主要实现多个图片，点击其中一个时，将该图片在特定区域放大（含注释），请着重关注JS代码思想。

运行该代码时，注意更换图片地址，如有问题请留言。

代码如下：

<!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" title="美女A"><img src="data:images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="images/2.jpg" title="美女B"><img src="data:images/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="images/3.jpg" title="美女C"><img src="data:images/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="images/4.jpg" title="美女D"><img src="data:images/4-small.jpg" width="100" alt="美女4"/></a></li>
</ul><div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="data:images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="common.js"></script>
<script>//点击a标签,把a标签中的href的属性值给id为image的src属性//把a的title属性的值给id为des的p标签赋值//从ul中标签获取获取所有的a标签var aObjs=my$("imagegallery").getElementsByTagName("a");//循环遍历所有的a标签for(var i=0;i<aObjs.length;i++){//为每个a标签注册点击事件aObjs[i].onclick=function () {//为id为image的标签的src赋值my$("image").src=this.href;//为p标签赋值my$("des").innerText=this.title;//阻止超链接默认的跳转return false;};}</script></body>
</html>

common.js

/*** 根据id属性的值,返回对应的标签元素* @param id id属性的值,string类型的* @returns {Element} 元素对象*/
function my$(id) {return document.getElementById(id);
}

JS 实现点击图片查看大图（含注释）相关推荐

基于JavaScript实现移动端点击图片查看大图点击大图隐藏
今天找到了一个我用了很好的方法,点击缩略图,放大居中展示,且参数可调,亲测可靠. 代码使用意见,将下面的代码放到本地测试效果,可以用一张自己的照片,点击会放大,再次点击还原. 一.需求点击图片查看 ...
html点击小图标显示全屏查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof .exampleImg { height:100 ...
php图片点击查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏_javascript技巧...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof 三.技巧因为移动端无法添加热点,最终一个解决方 ...
HTML5点击图片查看大图,科技常识：HTML5 实现图片预览和查看原图
今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图的相关资料,希望小伙伴们看了有所帮助. htm ...
iOS UILabel加载html点击图片查看大图附demo
我们在有些时候,因为性能和加载时间的问题,需要用UILabel加载html的方式来代替webview. 大部分情况,UILabel都可以很好的展示出想要的效果,但是却不能满足点击查看大图的需求. 本解 ...
vue点击图片查看大图使用插件 vue-photo-preview
1.引入插件 npm install vue-photo-preview --save 2.main.js import preview from 'vue-photo-preview'import ...
js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小
方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){$(".MAX_div").remove();$("#Cover_Div&q ...
vue点击图片查看大图的几种方法
目录一.使用插件vue-directive-image-previewer 二.使用elementui组件image的属性--previewSrcList 一.使用插件vue-directive-i ...
点击图片查看原图（图片按比例展示，点击旋转）
使用layer弹框:实现点击图片查看原图的效果: 引入layer,函数封装: // 点击图片查看大图 function showBigImage(e) {let src = $(e).attr('sr ...

JS 实现点击图片查看大图（含注释）

JS 实现点击图片查看大图（含注释）相关推荐

最新文章

热门文章