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

提问网友发布时间：2024-10-24 13:18

声明：本网页内容为用户发布，旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:1656858193@qq.com

共4个回答

热心网友回答时间：2024-10-26 19:59

完整的例子。其于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-10-26 20:04

用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-10-26 20:06

嗯我明白你说得，就是点击图片或者文字弹出来一个新的层是吧？

热心网友回答时间：2024-10-26 19:58

jquery有个组件叫 zoom. 你要的就是它.不用自己写了.下载下来,照着demo改下就能用了..成熟.基本没BUG.自己写还得考虑浏览器兼容..

本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。

已解决

等待解决

首页

互助专区

登录

注册

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