JavaScript-javascript如何做点击图片地址显示图片

JavaScript-javascript如何做点击图片地址显示图片

瑾兮 发布于 2017-07-25 字数 188 浏览 1225 回复 5

类似于这种,上传图片后显示图片地址,鼠标移到地址上就显示图片的方法,跟微博的上传图片一样
请输入图片描述

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

清晨说ぺ晚安 2017-09-28 5 楼

我决定你描述的好像不是新浪微博里面的那种,因为新浪微博并没有你说的hover然后show()、hide()什么的,我说一下新浪微博那种的一种实现思路吧。
你可以在上传图片函数的返回值里返回图片地址,然后把图片预览的这部分html代码存在一个字符串里,然后append到“图片”标签下面设置一下css就达到这种效果了

var html = '<table id="imgload">'+
'<tr>'+
'<td><span class="mark">◆</span></td>'+
'</tr>'+
'<tr><td><img class="img" src="/root/'+img.path+'" /></td></tr>'+
'<tr><td><div class="cancel">'+
'<a href="javascript:cancelload('+"'"+img.path+"'"+')">取消</a>'+
'</div></td></tr>'+
'</table>';
$("#img_button").append(html);
$("#post-text").val("分享图片");
recount();

归属感 2017-09-17 4 楼

其实应该是把图片hidden隐藏起来了,当你上传完图片后,系统通过ajax在当前页某个div里生成dom对象,也就是你上面显示的图片编辑层;通过鼠标触发事件来控制弹出层的显示或隐藏!而弹出层里的图片根据不同的图片id来动态加载不同的图片!

偏爱自由 2017-09-16 3 楼

这是通过iframe异步上传以后,通过parent.document.getElementById(id).innnerHTML='<img src="上传后生成的图片地址">',将图片的html代码写到个隐藏的div中,然后鼠标放到地址那个字符串后,把隐藏的div显示出来即可;

归属感 2017-08-22 2 楼

这个是异步上传,当你把图片上传完后就会把图片的链接地址写到页面上,并且在页面里创建一个隐藏的DIV层浮动,并在这个浮动层里创建一个<img src="上传后生成的图片地址">,然后把这个图片地址的mouseOver绑定到上传后的图片上。 当鼠标移上去后就会显示上传的图片

灵芸 2017-08-13 1 楼

在上传图片之前存放相关信息的位置是被隐藏的,当你上传完图片后可以通过jquery或js把相关信息添加到页面相应的位置。然后通过鼠标事件控制图片的显示。

下面是一个简单的显示图片的方法。
<script type="text/javascript" src=" http://static.mogupai.com/js/jquery.js"></script>
<script type="text/javascript">
<!--
$(window).load(function(){
$("#img_url").mouseover(function(){
$("#show_img").show();
}).mouseleave(function(){
$("#show_img").hide();
});
});
//-->
<!--</script>
<div class='all'>
<div id='img_url'>http://s.mogupai.com/sheepManage/Public/Upload/pic/133171427647.jpg</div>
<div id='show_img' style='display:none;width:161px;height:62px;'>
<img src='http://s.mogupai.com/sheepManage/Public/Upload/pic/133171427647.jpg' width='161' height='62' />
</div>
</div>