‘壹’ js怎么做点击一个图片弹出一个层的效果
其实弹出层的思路还是比较简单的：
一般是这个层是隐藏的(display:none)，然后点击你说的"图片(或者任何的页面元素)"，这个层就会显示（一般display:inline-block/block），同时设置一个灰色的背景看起来这个层是浮于下面的层之上的。
下面是一段演示代码：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8"><title>弹出层—到浏览器中央—背景变暗</title>
<style>
*{margin:0;padding:0px;}
body{padding:30px;}
#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}
#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}
#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}
#showp{padding:5px;}
#text{font-size:12px;text-indent:2em;line-height:20px;}
#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}
</style>
<scripttype="text/javascript">
functionshow(){
variWidth=document.documentElement.clientWidth;
variHeight=document.documentElement.clientHeight;
varbgObj=document.createElement("div");
bgObj.setAttribute("id","bgbox");
bgObj.style.width=iWidth+"px";
bgObj.style.height=Math.max(document.body.clientHeight,iHeight)+"px";
document.body.appendChild(bgObj);
varoShow=document.getElementById('show');
oShow.style.display='block';
oShow.style.left=(iWidth-302)/2+"px";
oShow.style.top=(iHeight-202)/2+"px";
functionoClose(){
oShow.style.display='none';
document.body.removeChild(bgObj);
}
varoClosebtn=document.createElement("span");
oClosebtn.innerHTML="×";
oShow.appendChild(oClosebtn);
oClosebtn.onclick=oClose;
bgObj.onclick=oClose;
}
</script>
</head>
<body>
<aonclick="show();returnfalse"href="#">请猛击我（我会弹到中间，同时背景变暗）</a>
<divid="show"><h3>弹出层标题栏</h3>
<pid="text">
这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。
</p>
</div>
</body>
</html>
‘贰’ javascript点击查看图片，弹框显示图片，怎么用js怎么实现
最好用插件，去layer官网有专门的点击图片，弹出浏览还支持多个图片。
先去官网下载layer包，你的网页引用layer的js文件。
地址：网页链接点击相册层
然后js代码：
//调用示例
layer.ready(function(){ //为了layer.ext.js加载完毕再执行
var ps=$("#psize").val();
layer.photos({
photos: '#layer-photos-demo'
,shift: ps //0-6的选择，指定弹出图片动画类型，默认随机
});
});
html代码：
<div id="layer-photos-demo" class="layer-photos-demo" >
<img layer-pid="图片id，可以不写" layer-src="缩略图片地址" src="图片地址" alt="" style="height: 140px;width: 120px;border:1px solid #bbb;">
</div>
‘叁’ 如何通过js获取网页中所有图片并加入点击事件，实现
在网页加载完成时，通过js获取图片和添加点击的识别方式
- (void)webViewDidFinishLoad:(UIWebView *)webView {
[IDProgressHUD IDPlaceViewHideDirect:self.view];
//这里是js，主要目的实现对url的获取
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.length;i++){\
imgScr = imgScr + objs[i].src + '+';\
};\
return imgScr;\
};";
[webView :jsGetImages];//注入js方法
NSString *urlResurlt = [webView :@"getImages()"];
mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
if (mUrlArray.count >= 2) {
[mUrlArray removeLastObject];
}
//urlResurlt 就是获取到得所有图片的url的拼接；mUrlArray就是所有Url的数组
//添加图片可点击js
[mWebView :@"function registerImageClickAction(){\
var imgs=document.getElementsByTagName('img');\
var length=imgs.length;\
for(var i=0;i<length;i++){\
img=imgs[i];\
img.onclick=function(){\
window.location.href='image-preview:'+this.src}\
}\
}"];
[mWebView :@"registerImageClickAction();"];
}
//在这个方法中捕获到图片的点击事件和被点击图片的url
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
//预览图片
if ([request.URL.scheme isEqualToString:@"image-preview"]) {
NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
path = [path :NSUTF8StringEncoding];
//path 就是被点击图片的url
return NO;
}
return YES;
}
‘肆’ 怎么样用javascript让图片可以点击怎样用javascript给图片加背景
<img src="test.jpg" onclick="test();">
这样可以给img绑定一个click事件，具体怎么实现就看test()方法里面怎么写了。至于你说的给图片添加背景，我就完全不明白是什么意思了。
‘伍’ js如何实现点击图片跳转页面获取页面的信息
第一种： 。
第二种： 。
第三种： 。
‘陆’ js怎么实现单击图片,在图片上画个'钩'
js点击事件原图片替换‘钩’图片
<script type="text/javascript">
function click(){
document.getElementById('id').src='b.jpg';
}
</script>
<img src="a.jpg" id="img" onclick="click()"/>
a.jpg原图片b.jpg‘钩’图片
‘柒’ 如何用js实现:第一次点击图片,图片路径更换,第二次点击的时候,弹出窗口,提示:"只能点击一次"
很简单, 第一次单击图片,路径更换,同时给图片加多一个class或者一个标示符能说明已经单击过的,,
然后当再次单击的时候再判断是否已经存在class
‘捌’ js 如何在图片上打点
原理是用canvas或svg来做。找一个canvas或svg相关的类库，调用之后能方便地画点和线就行了，当然业务逻辑要自己写，没有现成的。
‘玖’ 如何用JS实现，单击图片，在新的页显示图片
<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/avarta/66/r11s1g5.gif" onclick="window.open(this.src,'_blank')"/>
onclick 点击图片事件
window.open('','') 打开一个新网页 第一个参数是网址 第二个是打开方式
window.open(this.src,'_blank') 以该图片的路径为网址，以新页的方式打开