搜索

求一段鼠标滑过或者点击一张图片,然后在它旁边就会弹出一个框的...

发布网友 发布时间: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

嗯 我明白你说得,就是点击图片或者文字 弹出来一个新的层是吧?
声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。
E-MAIL:11247931@qq.com
Top