Java实现点击图片查看图片大图功能以及点击大图后返回原图片的一般思路是:
1、在页面中显示缩略图:在页面中使用<img>
标签显示缩略图,例如<img src="thumb.jpg">
。
2、给缩略图添加点击事件:使用JavaScript给缩略图添加点击事件,当用户点击缩略图时触发事件。
3、在事件中显示大图:在事件中获取缩略图的地址,然后使用JavaScript创建一个新的<img>
标签,将地址设置为大图的地址,添加到页面中。
4.给大图添加点击事件:同样使用JavaScript给大图添加点击事件,当用户点击大图时触发事件。
5、在事件中返回原图片:在事件中获取原图片的地址,然后使用JavaScript创建一个新的<img>
标签,将地址设置为原图片的地址,添加到页面中,同时移除之前添加的大图<img>
标签。
以下是一个简单的Java代码实现示例:
在页面中显示缩略图和大图容器:
<img id="thumb" src="thumb.jpg" onclick="showBigPic()"> <div id="bigPicContainer"></div>
给缩略图添加点击事件:
function showBigPic() { // 获取缩略图地址 var thumbUrl = document.getElementById("thumb").getAttribute("src"); // 创建新的<img>标签,设置地址为大图地址 var bigPic = document.createElement("img"); bigPic.setAttribute("src", "bigPic.jpg"); // 将大图添加到页面中的大图容器中 var container = document.getElementById("bigPicContainer"); container.appendChild(bigPic); // 给大图添加点击事件 bigPic.onclick = function() { // 获取原图片地址 var originUrl = thumbUrl.replace("thumb", "origin"); // 创建新的<img>标签,设置地址为原图片地址 var originPic = document.createElement("img"); originPic.setAttribute("src", originUrl); // 将原图片添加到页面中的大图容器中 container.appendChild(originPic); // 移除之前添加的大图<img>标签 container.removeChild(bigPic); // 给原图片添加点击事件 originPic.onclick = function() { // 移除原图片 container.removeChild(originPic); } } }
类似地,可以在页面中显示多个缩略图,并分别实现点击查看大图的功能。
评论