求一段鼠标滑过或者点击一张图片，然后在它旁边就会弹出一个框的代码，感谢！
我想在网页上做一个功能，但是呢自己不太会是菜鸟，我需要“一个用鼠标滑过图片或者点击，就会弹出一个框，并且这个框里面能放入图片”这样的功能的代码。不知道我说的大侠们能明白不...
我想在网页上做一个功能，但是呢自己不太会 是菜鸟， 我需要“一个用鼠标滑过图片或者点击，就会弹出一个框，并且这个框里面能放入图片”这样的功能的代码。不知道我说的大侠们能明白不？ 急求！感谢！
比如说“美丽”说这个网站，鼠标放在二维码上面，就会有一个框出现。 展开
比如说“美丽”说这个网站，鼠标放在二维码上面，就会有一个框出现。 展开
4个回答
展开全部
完整的例子。其于JQ做的。复制代码打开。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>测试</title>
<meta name="author" content="Await" />
<meta name="keywords" content="XY" />
<meta name="description" content="" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
*{margin: 0; padding: 0;}
.wrap{width:1000px; margin: 0 auto; padding: 20px 0px;}
.imgBox {position: relative; width: 500px; height: 200px;}
.detail {position: absolute; right: 0; bottom: 0; border: 1px solid #ccc;}
.hide{display: none;}
</style>
</head>
<body id="page">
<div class="wrap">
<div class="imgBox">
<img src="http://img.epinv.com/upimg/epinv/a13825ae62b8_AE28/PSjiqiao.png">
<p></p>
<div class="hide detail">
<img src="http://app.qlogo.cn/mbloghead/0307a200097aedaf1326/50">
</div>
</div>
</div>
<div class="js">
<script type="text/javascript">
jQuery(function($){
$(".imgBox").mouseenter(function(){
$(this).find(".detail").show();
}).mouseleave(function(){
$(this).find(".detail").hide();
})
});
</script>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>测试</title>
<meta name="author" content="Await" />
<meta name="keywords" content="XY" />
<meta name="description" content="" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
*{margin: 0; padding: 0;}
.wrap{width:1000px; margin: 0 auto; padding: 20px 0px;}
.imgBox {position: relative; width: 500px; height: 200px;}
.detail {position: absolute; right: 0; bottom: 0; border: 1px solid #ccc;}
.hide{display: none;}
</style>
</head>
<body id="page">
<div class="wrap">
<div class="imgBox">
<img src="http://img.epinv.com/upimg/epinv/a13825ae62b8_AE28/PSjiqiao.png">
<p></p>
<div class="hide detail">
<img src="http://app.qlogo.cn/mbloghead/0307a200097aedaf1326/50">
</div>
</div>
</div>
<div class="js">
<script type="text/javascript">
jQuery(function($){
$(".imgBox").mouseenter(function(){
$(this).find(".detail").show();
}).mouseleave(function(){
$(this).find(".detail").hide();
})
});
</script>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery的话不难
<div id="div1">
<div style="display: none; position: absolute;">
你要显示什么？
</div>
<div>
<img src="" />
</div>
</div>
<script>
$('div1').hover(function(){
var box=$(this).children(':first');
box.css('margin-left': box.next().width()).show();
}, function(){$(this).children(':first').hide();});
</script>
<div id="div1">
<div style="display: none; position: absolute;">
你要显示什么？
</div>
<div>
<img src="" />
</div>
</div>
<script>
$('div1').hover(function(){
var box=$(this).children(':first');
box.css('margin-left': box.next().width()).show();
}, function(){$(this).children(':first').hide();});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jquery有个组件叫 zoom. 你要的就是它.不用自己写了.下载下来,照着demo改下就能用了..成熟.基本没BUG.自己写还得考虑浏览器兼容..
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
嗯 我明白你说得，就是点击图片或者文字 弹出来一个新的层是吧？
追问
嗯，是的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
