求一段鼠标滑过或者点击一张图片,然后在它旁边就会弹出一个框的...
发布网友
发布时间：2024-11-02 10:42
共4个回答
热心网友
时间：2024-11-02 10:40
完整的例子。其于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>
热心网友
时间：2024-11-02 10:47
用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>
热心网友
时间：2024-11-02 10:47
jquery有个组件叫 zoom. 你要的就是它.不用自己写了.下载下来,照着demo改下就能用了..成熟.基本没BUG.自己写还得考虑浏览器兼容..
热心网友
时间：2024-11-02 10:48
嗯 我明白你说得，就是点击图片或者文字 弹出来一个新的层是吧？
