点击小图片在本页显示大图片

最新推荐文章于 2020-07-17 01:10:45 发布
最新推荐文章于 2020-07-17 01:10:45 发布
阅读量1.5k 收藏
点赞数
分类专栏： js代码 文章标签： border class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ziyou_jo/article/details/271580
版权

<img name="sp_bigimage" src="http://www.cnjade.biz/newhuayu/web/huayu_admin/sp_image/big/20050124104511_yl013.jpg" width="398" height="398"> <br><br>

<img src="http://www.cnjade.biz/newhuayu/web/huayu_admin/sp_image/small/20050124104511_yl013.jpg" alt="" width="60" height=60 hspace=2  title="" vspace=2 border=1 class="h1" style="CURSOR: hand; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid" onClick="document.sp_bigimage.src='http://www.cnjade.biz/newhuayu/web/huayu_admin/sp_image/big/20050124104511_yl013.jpg';">
<img src="http://www.cnjade.biz/newhuayu/web/huayu_admin/sp_image/small/20050124104537_yl013a.jpg" alt="" width="60" height=60 hspace=2  title="" vspace=2 border=1 class="h1" style="CURSOR: hand; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid" onClick="document.sp_bigimage.src='http://www.cnjade.biz/newhuayu/web/huayu_admin/sp_image/big/20050124104537_yl013a.jpg';">  
<img src="http://www.cnjade.biz/newhuayu/web/huayu_admin/sp_image/small/20050124104600_yl013b.jpg" alt="" width="60" height=60 hspace=2  title="" vspace=2 border=1 class="h1" style="CURSOR: hand; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid" onClick="document.sp_bigimage.src='http://www.cnjade.biz/newhuayu/web/huayu_admin/sp_image/big/20050124104600_yl013b.jpg';"> 

ziyou_jo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 点击小图显示大图
09-13
网上找来的，很方便移植，具体链接忘记是多少了，感谢作者的无私奉献
jQuery图片切换点击小图显示相应的大图片预览
11-02
jQuery图片切换点击小图显示相应的大图片预览 jQuery图片切换点击小图显示相应的大图片预览
详情页里图片点击放大查看更清楚的图片
weixin_30794499的博客
07-30 974
setTimeout(function(){ var tempImg = document.getElementsByClassName("msg_Img"); for (var i = 0; i < tempImg.length; i++) { tempImg[i].onclick=function(){ ...
鼠标放小图上显示大图
C#.NET专栏
04-26 735
window.onload = function () {             var datas = {                 "img/1-1.jpg": ["img/1.jpg", "老牛", "163cm"],                 "img/2-1.jpg": ["img/2.jpg", "老马", "165cm"],                 "i
jquery实现点击小图片显示大图片
qq_43102118的博客
07-17 679
首先要准备4张小图片和4张大图片，代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } </style> </head> <body> <im
JavaScript图片廊——实现点击小图片栏显示大图
Bruce_Json的博客
09-03 2017
 显示小图列表的方法是eg.showThumb(),单击小图要显示大图，需要调用eg.showBig()方法，只有单击小图片时候响应单击事件才行，所以需要用eg.addListenner()方法实现，这个方法是一个跨浏览器绑定事件函数 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click"...
jQuery实现点击小图片淡入淡出显示大图片特效
10-23
本文给大家分享基于jquery实现的一款图片特效，当点击小图片时会淡入淡出大图片，通过定义需要展示的图片以及图片要展示的时间，来实现这一效果，感兴趣的朋友跟着小编一起来学习吧
js点击小图片显示大图片.rar
07-10
一个图片放大特效，Revealing Photo Slider点击小图片显示大图片效果，来自国外前端设计网站，用js实现点击图片无刷新显示大图片，放大图片的过程中，带有动态效果，点击第二张图片时，第一张图片自动恢复至缩略图...
jquery小图片左右滚动点击小图切换显示大图
06-09
jquery图片切换效果，制作一个通过小图缩略图点击切换显示相应的大图，当缩略图过多时可以点击左右按钮控制缩略图片左右滚动，进行更多的图片切换。
jQuery Lightbox图片放大预览代码是用户点击页面中的小图片时，将该图片的高清版本放大显示在页面的中间
06-27
jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时，将该图片的高清版本以Lightbox的方式放大显示在页面的中间，提高用户浏览体验。兼容主流浏览器
一个简单的日历控件
☆★子游★☆★爱无悔★☆
01-18 2287
calendar.js   function atCalendarControl(){  var calendar=this;  this.calendarPad=null;  this.prevMonth=null;  this.nextMonth=null;  this.prevYear=null;  this.nextYear=null;  this.goToday=
双击网页链接或图片,弹出保存图片的对话框,
☆★子游★☆★爱无悔★☆
03-18 1517
保存function save(){  var e = window.event.srcElement;  if(e.tagName=="A")  {    var win=window.open(e.href, "_blank", "top=1200px,left=1200px");    win.document.execCommand(SaveAs);    win.opener=nul
表单可以多次提交值在本页，再最后全部保存数据库
☆★子游★☆★爱无悔★☆
01-28 1431
无标题文档a, a:link{text-decoration: none; color:#000000; font-size:9pt;}    a:visited{text-decoration: none; color:#000000;}    a:hover{text-decoration: underline; color:red;}BODY, TD, SELECT{FONT-SIZE:9p
11种刷新按钮的方法
☆★子游★☆★爱无悔★☆
04-14 1111
JS常用菜单
☆★子游★☆★爱无悔★☆
02-01 1082
　每当我们看到别人网页上的打开、打印、前进、另存为、后退、关闭本窗口、禁用右键等实现浏览器命令的链接，而自己苦于不能实现时，是不是感到很遗憾？是不是也想实现？如果能在网页上能实现浏览器的命令，将是多么有意思的事啊！下面我们就来看看如何用Javascript代码实现浏览器菜单命令(以下代码在Windows XP下的浏览器中调试通过)。　　一、【文件(F)】菜单中的命令的实现　　1、〖打开〗命令的
按钮－全选复选框
☆★子游★☆★爱无悔★☆
01-03 1058
var checkflag = "false";function check(field) {if (checkflag == "false") {for (i = 0; i field[i].checked = true;}checkflag = "true";return "取消全选"; }else {for (i = 0; i field[i].checked = false; }che
[转帖]一些常用的js脚本
☆★子游★☆★爱无悔★☆
04-14 958
省得用时再去找，cp过来的1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table2. 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复制5. IE地址栏前换成自己的图标6. 可
经典《下拉菜单》选择在本页显示内容
☆★子游★☆★爱无悔★☆
01-19 891
if($act=="y"){ $selectnum=count($province); for($i=0;$i print $province[$i]."----".$do_url[$i].""; }}?> 数    量： -请选择-123 function redirect(x){var str=;for (i=1;istr += i+"省&
编写一段点击图片创建全屏图层显示大图片的js代码
最新发布
06-10
您可以参考以下代码实现： HTML部分： ```html <img src="small-image.jpg" alt="Small Image" onclick="showImage('large-image.jpg')"> ``` JS部分： ```javascript function showImage(imageUrl) { // 创建全屏图层 var overlay = document.createElement('div'); overlay.style.position = 'fixed'; overlay.style.top = 0; overlay.style.left = 0; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; overlay.style.zIndex = 9999; // 创建大图 var image = document.createElement('img'); image.src = imageUrl; image.style.position = 'absolute'; image.style.top = '50%'; image.style.left = '50%'; image.style.transform = 'translate(-50%, -50%)'; image.style.maxWidth = '90%'; image.style.maxHeight = '80%'; // 添加大图到全屏图层 overlay.appendChild(image); // 添加全屏图层到body document.body.appendChild(overlay); // 点击全屏图层关闭 overlay.onclick = function() { document.body.removeChild(overlay); }; } ``` 这段代码会在页面中显示一张小图片，当用户点击图片时，会创建一个全屏图层，并在图层中显示大图。用户可点击全屏图层以关闭。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值