如何在缩略图图像的翻转上显示弹出窗口?Javascript、CSS
how is the popup displayed on rollover of a thumbnail image designed? Javascript, CSS
我正在构建一个图片库，并且根据要求，当鼠标滚动到缩略图图像时，缩略图的一个小放大版本，其中包含实际图像的标题，大小等细节。需要在放大的图像上显示。注意-放大的图像仅在滚动时显示，当鼠标移出缩略图图像区域时立即消失。我知道这是一个非常普遍的功能，在大多数的照片网站，和一个完美的例子是雅虎图片搜索(见:雅虎图片搜索)
基本上，按照要求，代码需要在Javascript中构建，而不使用任何库，如Jquery。在core JS中，翻转应该可以工作。
我知道onmouseover可以做到这一点，但我的问题是如何确保适当地显示放大的图像(例如，在缩略图的右侧，当有足够的空间可用时，或者在缩略图的左侧/上方/顶部，作为间距约束可能是?
另外，滚动时弹出的"新页面"是如何设计的(好吧，不是一个新页面，只是一个不显眼的弹出窗口)?
任何关于如何去做的指示都是非常感激的。注意-我知道库可以缓解这个问题，但正如我所说，它需要在核心JS中完成，即使渐入/渐出看起来很粗糙。
谢谢!
一个简单、直接的实现，不需要第三方库或Ajax。这与产品质量相差甚远，但可能有助于您开始。
主要的"技巧"是，图像位于一个容器中，该容器具有CSS"overflow:hidden"…然后，当你翻转，你设置CSS，使它显示溢出(例如，通过改变类名)…此外，类名的更改还显示了附加信息，这些信息一直嵌入在页面中，但在…之前设置为"display:none"
希望这对你有帮助。
<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>
您可以使用AJAX请求页面并在当前页面上添加div, css样式位置为绝对或相对。我在我的一个图库中使用了这个方法。
- onmouseover按钮或拇指，将触发GetPhoto();toggle('photo');style('photo');
-
- GetPhoto()将ajax到任何文件有照片或照片本身，并隐藏在id="photo" DIV。
-
- toggle()将id="photo" DIV标签的可见性切换为visible
-
- style()将id="photo" DIV标签的位置设置为fixed
TO CONFIGURE:修改
中的文件xmlhttp.open("获得"、"YOUR.PAGE.php",真的),
到将要使用的文件名。
<div id="photo" style="position: absolute; visibility: hidden;"></div>
<script>
//<![CDATA[
function GetPhoto(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// clear element first so it can be reused.
document.getElementById("photo").innerHTML='';
document.getElementById("photo").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET","YOUR.PAGE.php",true);
xmlhttp.send();
}
function toggle(obj) {
var item = document.getElementById(obj);
if (item.style.visibility == 'visible') {
item.style.visibility = 'hidden';
}
else {
item.style.visibility = 'visible';
}
}
function style(obj) {
var item = document.getElementById(obj);
if (item.style.position == 'fixed') { item.style.position = 'absolute'; }
else { item.style.position = 'fixed'; }
}
//]]>
</script>
<button onmouseover="GetPhoto(); toggle('photo'); style('photo');" onmouseout="toggle('photo'); style('photo');">Mouse Over Object</button>
您可以使用具有绝对定位的div作为容器来显示放大版本。根据x &缩略图的Y。要计算div的位置，可以使用窗口的高度&宽度和检查是否
[width of pop-up div] + [left of the div] < [width of the window]
高度也可以做类似的事情
相关文章：
- 关闭黑莓浏览器窗口 JavaScript
- 关闭窗口 Javascript
- 清除窗口Javascript幻灯片
- 弹出窗口JavaScript的站点地图生成器
- 根据弹出窗口javascript的返回值更改asp.net面板的可见性
- 将var添加到新窗口Javascript中
- 如何在引导模式弹出窗口(javascript，jquery）上运行函数
- 仅包含某些数组值的单个弹出窗口.JavaScript
- 将值传递给弹出窗口 [JavaScript]
- 在链接后控制父窗口(JavaScript）
- 将数据发送到单独的窗口javascript
- 正在访问窗口.Javascript 中的应用程序函数
- 将变量从父窗口Javascript函数传递到弹出窗口分区
- 在内容进入打印机之前关闭窗口(JavaScript）
- 窗口.JavaScript中的innerWidth
- 是否可以从子窗口关闭父窗口(Javascript）
- 窗口.javascript中的Innerheight减去数字
- 如果我重写窗口.javascript中的onerror应该返回true还是false
- 计数值后关闭窗口javascript
- 如何在缩略图图像的翻转上显示弹出窗口?Javascript、CSS
