gmth.net
当前位置:首页 >> 如何用JS/JQ实现,点击小图片显示大图片及详细信息... >>

如何用JS/JQ实现,点击小图片显示大图片及详细信息...

附件是一个简单的点击放大的效果, 你可以看一下

我自己没试过,给你个思路,只能帮你到这,HTML编写一个div中间嵌套两个div,一个用来承载图片一个为详细信息,js中jq代码绑定事件,点击图片,显示HTML中写好的div即可。具体的各种方法参照jQuery API

简单点就是用图片的两个大小,然后判断当前图片名,显示大的名称加个b,显示小的就删掉b就可以了

分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function,分别写想要放大的尺寸和缩小或复原的尺寸。 具体代码实现如下: var img = document.getElementById('img'); function bigger(){ img.style.width = '400px'; img.style....

显示图片和描述图片描述function imgshow(){document.getElementById("tmms").style.display="block";}

Document 请选择图片文件:JPG/GIF $("#file0").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log("objUrl = "+objUrl) ; if (objUrl) { $("#img0").attr("src", objUrl); $("#img0").removeClass("hide"); } }) ; ...

1.引用JS $(function() { $('.showPic').lightBox(); }); 2.在连接中调用,class="showPic"是必要的 3.js自已下载

代码示例: window.onload=function(){ var Imgbtn=document.getElementById('btn'); var Img=document.getElementById('img'); Imgbtn.onclick=function(){ if(Img.src=='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png') { Img.src=...

.onwindow { position: fixed; top: 43%; left: 43%; z-index: 99; width: 250px; height: 135px; background-color: rgba(255,255,255,1); display:none; border:2px solid red; border-radius:15px; padding:10px; } .plank { position: fixe...

通过JS代码 document.getElementById('divID').style.etElementById('divID').style.display = 'none'。函数可以实现。 1、遮罩层: ,即作为背景层,覆盖整个页面。弹出层:,即背景层上的一层,此层可根据#form{top: 10%; left: 10%;width: 20...

网站首页 | 网站地图
All rights reserved Powered by www.gmth.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com