缩略图翻滚时的弹出窗口是如何设计的？Javascript、CSS
我正在建立一个照片库，根据要求，当鼠标在缩略图上滚动时，会有一个略显放大的缩略图，上面有实际图像的标题、大小等细节。。需要显示在放大的图像上。注意-放大图像仅在滚动时显示，当鼠标移出缩略图区域时，放大图像立即消失。我知道这是大多数photogallery网站中非常常见的功能，Yahoo图像搜索就是一个很好的例子（见：） 基本上，根据需求，代码需要在Javascript中构建，而不使用任何库，如Jquery。因此，在CoreJS中，滚动应该可以工作 我知道onmouseover可以做到这一点，但我的问题是如何确保放大后的图像能够正确显示（例如，当有足够的空间时显示在缩略图的右侧，或者显示在缩略图的左侧/上方/顶部，如间距限制所示） 另外，滚动时弹出的“新页面”是如何设计的（嗯，不完全是一个新页面，只是一个不引人注目的弹出窗口） 请注意，我知道库可以简化这件事，但正如我所说的，它需要在core JS中完成，即使淡入淡出看起来很粗糙缩略图翻滚时的弹出窗口是如何设计的？Javascript、CSS,javascript,css,image,thumbnails,rollover,Javascript,Css,Image,Thumbnails,Rollover,我正在建立一个照片库，根据要求，当鼠标在缩略图上滚动时，会有一个略显放大的缩略图，上面有实际图像的标题、大小等细节。。需要显示在放大的图像上。注意-放大图像仅在滚动时显示，当鼠标移出缩略图区域时，放大图像立即消失。我知道这是大多数photogallery网站中非常常见的功能，Yahoo图像搜索就是一个很好的例子（见：） 基本上，根据需求，代码需要在Javascript中构建，而不使用任何库，如Jquery。因此，在CoreJS中，滚动应该可以工作 我知道onmouseover可以做到这一点，但我
谢谢！您可以使用具有绝对定位的div作为容器来显示放大的版本。根据缩略图的x&y设置div的“左”和“顶”。要计算div的位置，可以使用窗口的高度和宽度并检查
[width of pop-up div] + [left of the div] < [width of the window]
[弹出div的宽度]+[div的左侧]<[窗口的宽度]
高度也可以做类似的事情。您可以使用AJAX请求页面并附加到当前页面上的div，css样式的位置为绝对或相对。我对我的一个Gallery使用此方法
- 按下按钮或拇指，将启动GetPhoto（）；切换（'photo'）；样式（'photo'）
- GetPhoto（）将ajax转换为包含照片或照片本身的任何文件，并将其隐藏在id=“photo”DIV中
- toggle（）将id=“photo”DIV标记的可见性切换为可见
- style（）将id=“photo”DIV标签的位置切换到固定位置
//
鼠标悬停在物体上
<html>
<head>
<style>
.container{
position: relative;
display:block;
width: 150;
height: 150px;
float:left;
margin:5px;
z-index: 1;
}
.container .popup{
position: absolute;
display:block;
width: 150;
height: 150px;
overflow: hidden;
z-index: 1;
}
.container img{
position:relative;
}
.container .footer{
display:none;
}
.containerOpen{
position: relative;
display:block;
width: 150;
height: 150px;
float:left;
margin:5px;
z-index: 20000;
}
.containerOpen .popup{
position: absolute;
display:block;
padding: 5px;
overflow: visible;
background: #ff0000;
z-index: 10000;
}
.containerOpen img{
position:relative;
left: 0px !important;
top: 0px !important;
}
.containerOpen .footer{
display:block;
background:#cccccc;
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="popup">
<img src="http://ts3.mm.bing.net/images/thumbnail.aspx?q=1290129900246&id=6bfb5f7543719fe92db9edb864a8ea90" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<div class="container">
<div class="popup">
<img src="http://ts3.mm.bing.net/images/thumbnail.aspx?q=1262145976094&id=358c632c2a4025e850b559ccf1778dff" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<div class="container">
<div class="popup">
<img src="http://ts2.mm.bing.net/images/thumbnail.aspx?q=1311373591873&id=6c6770a9c21d648841bbd3c47324d848" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<script type="text/javascript">
document.getElementsByClass = function(classname){
var itemsfound = [];
var elements = document.getElementsByTagName('*');
for(var i=0; i<elements.length; i++){
if(elements[i].className == classname){
itemsfound.push(elements[i]);
}
}
return itemsfound;
}
window.onload = function () {
var containers = document.getElementsByClass('container');
for (var i in containers){
var elContainer = containers[i];
var elPopup = elContainer.children[0];
var elImg = elPopup.children[0];
var elFooter = elPopup.children[1];
var width = elImg.offsetWidth;
var height = elImg.offsetHeight;
var thumbWidth = 150;
var thumbHeight = 150;
var offsetX = "left:-" + Math.round(0.5*(width-thumbWidth)) + "px; ";
var offsetY = "top:-" + Math.round(0.5*(height-thumbHeight)) + "px; ";
elImg.setAttribute("style", offsetX + offsetY );
elContainer.onmouseover = function(){
this.className = 'containerOpen';
}
elContainer.onmouseout = function(){
this.className = 'container';
}
}
}
</script>
</body>
</html>
.集装箱{
位置：相对位置；
显示：块；
宽度：150；
高度：150像素；
浮动：左；
保证金：5px；
z指数：1；
}
.container.popup{
位置：绝对位置；
显示：块；
宽度：150；
高度：150像素；
溢出：隐藏；
z指数：1；
}
.集装箱img{
位置：相对位置；
}
.container.footer{
显示：无；
}
.集装箱围栏{
位置：相对位置；
显示：块；
宽度：150；
高度：150像素；
浮动：左；
保证金：5px；
z指数：20000；
}
.containerOpen.popup{
位置：绝对位置；
显示：块；
填充物：5px；
溢出：可见；
背景：#ff0000；
z指数：10000；
}
.containerOpen img{
位置：相对位置；
左：0px！重要；
顶部：0px！重要；
}
.containerOpen.footer{
显示：块；
背景:#中交;；
填充：10px；
}
更多信息在这里。
更多信息在这里。
更多信息在这里。
document.getElementsByClass=函数（类名）{
var itemsfound=[]；
var elements=document.getElementsByTagName（'*'）；
对于（var i=0；i
<html>
<head>
<style>
.container{
position: relative;
display:block;
width: 150;
height: 150px;
float:left;
margin:5px;
z-index: 1;
}
.container .popup{
position: absolute;
display:block;
width: 150;
height: 150px;
overflow: hidden;
z-index: 1;
}
.container img{
position:relative;
}
.container .footer{
display:none;
}
.containerOpen{
position: relative;
display:block;
width: 150;
height: 150px;
float:left;
margin:5px;
z-index: 20000;
}
.containerOpen .popup{
position: absolute;
display:block;
padding: 5px;
overflow: visible;
background: #ff0000;
z-index: 10000;
}
.containerOpen img{
position:relative;
left: 0px !important;
top: 0px !important;
}
.containerOpen .footer{
display:block;
background:#cccccc;
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="popup">
<img src="http://ts3.mm.bing.net/images/thumbnail.aspx?q=1290129900246&id=6bfb5f7543719fe92db9edb864a8ea90" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<div class="container">
<div class="popup">
<img src="http://ts3.mm.bing.net/images/thumbnail.aspx?q=1262145976094&id=358c632c2a4025e850b559ccf1778dff" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<div class="container">
<div class="popup">
<img src="http://ts2.mm.bing.net/images/thumbnail.aspx?q=1311373591873&id=6c6770a9c21d648841bbd3c47324d848" />
<div class="footer">
Additional Information goes here.
</div>
</div>
</div>
<script type="text/javascript">
document.getElementsByClass = function(classname){
var itemsfound = [];
var elements = document.getElementsByTagName('*');
for(var i=0; i<elements.length; i++){
if(elements[i].className == classname){
itemsfound.push(elements[i]);
}
}
return itemsfound;
}
window.onload = function () {
var containers = document.getElementsByClass('container');
for (var i in containers){
var elContainer = containers[i];
var elPopup = elContainer.children[0];
var elImg = elPopup.children[0];
var elFooter = elPopup.children[1];
var width = elImg.offsetWidth;
var height = elImg.offsetHeight;
var thumbWidth = 150;
var thumbHeight = 150;
var offsetX = "left:-" + Math.round(0.5*(width-thumbWidth)) + "px; ";
var offsetY = "top:-" + Math.round(0.5*(height-thumbHeight)) + "px; ";
elImg.setAttribute("style", offsetX + offsetY );
elContainer.onmouseover = function(){
this.className = 'containerOpen';
}
elContainer.onmouseout = function(){
this.className = 'container';
}
}
}
</script>
</body>
</html>