当鼠标放在小图上显示大图时，显示的大图不能超出当前窗口？用js做吗？怎么做的？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当鼠标放在小图上显示大图时，显示的大图不能超出当前窗口？用js做吗？怎么做的？相关的知识，希望对你有一定的参考价值。
当大图超出时，等比缩放；如果小图在左下方，怎么让大图显示在当前窗口可见区域内，如右上方？
你的补充问题， 的意思就是完全另一种效果了。 以下实现方法：html:
<div style="width:200px; height:200px; overflow:hidden; position:relative">
<img src="" width="100" height="100" id="pic_small_1" onmouseover="show_big('pic_big_1')" onmouseover="hide_big('pic_big_1')>
<img src="" width="200" height="200" id="pic_big_1" style="position:absolute; top:-100px; right:20px; " >
</div>
js:
function show_big(id)
document.getElementById(id).style.display="block";
function hide_big(id)
document.getElementById(id).style.display="none";
-----------------------------------------------------------------------------------------------------------------
HTML:
<div style="width:200px; height:200px; overflow:hidden "><img src="" width="100" height="100" id="pic_1" onmouseover="fangda('pic_1')" ></div>
JS:
function fangda(id)
document.getElementById(id).style.width="300px";
document.getElementById(id).style.width="300px";
注： 当鼠标放到小图时， 小图就放大了三倍， 但是 DIV只有200PX 。而 overflow:hidden 溢出隐藏
图片将有部分看不到， 不会超出这个DIV。
（提醒：你的问题分类选错了） 参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function zoomUp(obj)
obj.style.width="545px";
obj.style.height="200px";
function zoomDown(obj)
obj.style.width="54px";
obj.style.height="20px";
</script>
</head>
<body>
<img alt="pic/hp_topbanner1.jpg" src="pic/hp_topbanner1.jpg" width="54" height="20" onmouseover="zoomUp(this)" onmouseout="zoomDown(this)">
</body>
</html> 参考技术B 学习学习 都是行家
jQuery制作图片提示效果
需求说明
鼠标移动到小图上时，跟随鼠标可以显示出对应大图
当鼠标在小图上移动时，大图也会跟随鼠标移动位置
鼠标离开小图时，显示的大图消失
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接提示图片</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style>
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
</head>
<body>
<h3 class="title">超链接提示图片</h3>
<div class="small">
<a href="images/1.jpg" class="tooltip" title="手机"><img class="current" src="images/1_bigger.jpg" width="128px" alt="胡歌" /></a>
<a href="images/2.jpg" class="tooltip" title="手机"><img src="images/2_bigger.jpg" width="128px" alt="胡歌" /></a>
<a href="images/3.jpg" class="tooltip" title="手机"><img src="images/3_bigger.jpg" width="128px" alt="胡歌" /></a>
</div>
</body>
<script src="js/lianxi.js"></script>
<script src="js/jquery-1.12.4.js"></script>
</html>
js（jquery-1.12.4.js）
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id=‘tooltip‘><img src=‘"+ this.href +"‘ alt=‘‘/>"+imgTitle+"</div>";
//创建 div 元素
$("body").append(tooltip);
//把它追加到文档中
$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px",
});
});
})
以上是关于当鼠标放在小图上显示大图时，显示的大图不能超出当前窗口？用js做吗？怎么做的？的主要内容，如果未能解决你的问题，请参考以下文章