纳金网

标题: javascript如何做点击图片地址显示图片 [打印本页]

---

作者: 比巴卜    时间: 2013-4-11 16:38
标题: javascript如何做点击图片地址显示图片
类似于这种，上传图片后显示图片地址，鼠标移到地址上就显示图片的方法，跟微博的上传图片一样

---

作者: 比巴卜    时间: 2013-4-11 16:39
在上传图片之前存放相关信息的位置是被隐藏的，当你上传完图片后可以通过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>

---

欢迎光临 纳金网 (http://old.narkii.com/club/)

Powered by Discuz! X2.5