图像预览框 [英] Image preview box

问题描述

我的 CSS(或 jQuery?)中的图像预览有问题.

请查看顶部的正确示例页面和底部的混乱页面:

实际上我想将预览框保留在浏览器窗口中，但现在它越过了边缘.

PS:我没有使用jQuery代码，预览框是CSS.

我现在该怎么办?我应该用 jQuery 解决这个问题吗?

<小时>

这是我的全部代码.我从本教程中获取了整个预览框:
CSS3 演示 - 图片弹出

HTML

<li><img src="assets/image-enlarge01-sml.jpg" width="150px" height="100px" alt="Dechairs"/><span><img src="assets/image-enlarge01.jpg" alt="Deckchairs"/><br/>布莱克浦海滩上的躺椅</span></li><li><img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="布莱克浦日落"/><span><img src="assets/image-enlarge02.jpg" alt="布莱克浦日落"/><br/>布莱克浦爱尔兰海上的日落</span></li><li><img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="Blackpool pier"/><span><img src="assets/image-enlarge03.jpg" alt="布莱克浦码头"/><br/>布莱克浦北码头滚滚海浪</span></li>

CSS

ul.enlarge {列表 - 样式 - 类型:无；/*删除项目符号*/边距 - 左:0；}ul.放大 li {显示:内联 - 块；/* 将图像排成一行*/位置:相对；z - 索引:0；/*重置列表项的堆栈顺序-稍后我们将增加它*/边距:10 像素 40 像素 0 20 像素；}ul.放大 img {背景 - 颜色:#eae9d4；填充:6 像素；- webkit - box - shadow: 0 0 6 px rgba(132, 132, 132, .75);- moz - box - shadow: 0 0 6 px rgba(132, 132, 132, .75);框 - 阴影:0 0 6 px rgba(132, 132, 132, .75);- webkit - 边框 - 半径:4 px；- moz - 边框 - 半径:4 像素；边框 - 半径:4 像素；}ul.扩大跨度{位置:绝对；左:-9999 像素；背景 - 颜色:#eae9d4；填充:10 像素；字体 - 系列:'Droid Sans'，无衬线字体;字体 - 大小:.9e m；文本 - 对齐:居中；颜色:#495a62；-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);box-shadow: 0 0 20px rgba(0,0,0, .75);-webkit-border-radius: 8px;-moz-border-radius: 8px;边框半径:8px；}ul.enlarge li:hover{z-索引:50；游标:指针；}ul.enlarge span img{填充:2px；背景:# ccc;}ul.enlarge li:悬停跨度{顶部:-300 像素；/*缩略图底部到弹出图像顶部的距离*/左:-20 像素；/*缩略图左侧到弹出图像左侧的距离*/}ul.enlarge li: hover: nth - child(2) span {左:-100 像素；}ul.enlarge li: hover: nth - child(3) span {左:-200 像素；}/**IE Hacks - 有关如何使用 CS3Pie 和下载最新版本的更多信息，请访问 http://css3pie.com/**/ul.enlarge img, ul.enlarge span {行为: url(pie/PIE.htc);}

解决方案

let preview = document.querySelectorAll(".preview");让 previewBoxImg = document.querySelector(".previewBox img");让 previewBox = document.querySelector(".previewBox");for(let i = 0; i 

.previewBox{背景:#212323；宽度:10em；高度:10em；填充:0.3em；显示:无；位置:相对；}.previewBox.show{显示:块；}.previewBox img{宽度:100%；高度:100%；}

<a href="http://pre01.deviantart.net/ad77/th/pre/f/2013/181/3/8/rainbow_dash___equestria_girls_by_pixelflow1-d6bcnn3.png" target="_blank" class="preview">Rainbow Dash</a><a href="http://img04.deviantart.net/bc84/i/2013/230/4/1/equestria_girls__wondercolt_applejack_by_deathnyan-d6ip4fx.png" target="_blank" class="preview">AppleJack</a><a href="http://orig12.deviantart.net/e1d6/f/2013/297/f/d/equestria_girls_fluttershy_by_iamaquamarine_d6_by_laughandcry12-d6rozpu.png" target="_blank" class="预览">F;<a href="http://t02.deviantart.net/3nw-fOth2hVnTnPyGp9b-CTMAdI=/fit-in/300x900/filters:no_upscale():origin()/pre03/4d4e/th/pre/i/2015/056/7/8/pinkie_pie_eqg__wondercolts_pose_by_caliazian-d6mznqo.png" target="_blank" class="preview">Pinkie</a><a href="http://orig08.deviantart.net/ba65/f/2013/186/b/5/egq_rarity_vector_by_unicornrarity-d6c4uav.png" target="_blank" class="preview">Rarity</a><a href="http://orig01.deviantart.net/6eb7/f/2014/003/b/2/twilight_sparkle_equestria_girls__blush__by_emerald_ray-d6qyey0.png" target="_blank" class="preview">暮光</a;<div class="previewBox"><img src=""/>

I have an issue with images preview in my CSS (or jQuery?).

Please look at the right example page in top and my messed page in bottom:

Actually I want to keep my preview box in the browser windows, but now it's crossing over the edge.

PS: I didn't use jQuery codes, the preview box is CSS.

What should I do now? Should I solve the issue with jQuery?

---

This is my whole code. I grabbed the whole preview box from this tutorial:
CSS3 Demos - Image popup

HTML

<ul class="enlarge">
  <li><img src="assets/image-enlarge01-sml.jpg" width="150px" height="100px" alt="Dechairs" /><span><img src="assets/image-enlarge01.jpg" alt="Deckchairs" /><br />Deckchairs on Blackpool beach</span></li>
  <li><img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="Blackpool sunset" /><span><img src="assets/image-enlarge02.jpg" alt="Blackpool sunset" /><br />Sunset over the Irish Sea at Blackpool</span></li>
  <li><img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="Blackpool pier" /><span><img src="assets/image-enlarge03.jpg" alt="Blackpool pier" /><br />Rolling waves off Blackpool North Pier</span></li>
</ul>

CSS

ul.enlarge {
    list - style - type: none; /*remove the bullet point*/
    margin - left: 0;
}
ul.enlarge li {
    display: inline - block; /*places the images in a line*/
    position: relative;
    z - index: 0; /*resets the stack order of the list items - later we'll increase this*/
    margin: 10 px 40 px 0 20 px;
}
ul.enlarge img {
    background - color: #eae9d4;
    padding: 6 px; - webkit - box - shadow: 0 0 6 px rgba(132, 132, 132, .75); - moz - box - shadow: 0 0 6 px rgba(132, 132, 132, .75);
    box - shadow: 0 0 6 px rgba(132, 132, 132, .75); - webkit - border - radius: 4 px; - moz - border - radius: 4 px;
    border - radius: 4 px;
}
ul.enlarge span {
    position: absolute;
    left: -9999 px;
    background - color: #eae9d4;
    padding: 10 px;
    font - family: 'Droid Sans',
    sans - serif;
    font - size: .9e m;
    text - align: center;
    color: #495a62; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:# ccc;
}
ul.enlarge li: hover span {
    top: -300 px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: -20 px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li: hover: nth - child(2) span {
    left: -100 px;
}
ul.enlarge li: hover: nth - child(3) span {
        left: -200 px;
    }
    /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span {
    behavior: url(pie / PIE.htc);
}

解决方案

let preview = document.querySelectorAll(".preview");
let previewBoxImg = document.querySelector(".previewBox img");
let previewBox = document.querySelector(".previewBox");

for(let i = 0; i < preview.length; i++){
	
	
	preview[i].addEventListener("mouseenter",function(e){
		
		let imgSrc = this.href;
	  previewBoxImg.src = imgSrc;
		previewBox.classList.add("show");
		previewBox.style = `top: ${e.clientY};left: ${e.clientX};`;
		
	});
	
	preview[i].addEventListener("mouseleave",function(){
		
		previewBox.classList.remove("show");
		
	});
	
	
}

.previewBox{

  background: #212323;
  width: 10em;
  height: 10em;
  padding: 0.3em;
  display: none;
	position: relative;

}

.previewBox.show{

  display: block;
  

}

.previewBox img{
  width: 100%;
  height: 100%;
}

<a href="http://pre01.deviantart.net/ad77/th/pre/f/2013/181/3/8/rainbow_dash___equestria_girls_by_pixelflow1-d6bcnn3.png" target="_blank" class="preview">Rainbow Dash</a>

<a href="http://img04.deviantart.net/bc84/i/2013/230/4/1/equestria_girls__wondercolt_applejack_by_deathnyan-d6ip4fx.png" target="_blank" class="preview">AppleJack</a>

<a href="http://orig12.deviantart.net/e1d6/f/2013/297/f/d/equestria_girls_fluttershy_by_iamaquamarine_d6_by_laughandcry12-d6rozpu.png" target="_blank" class="preview">Fluttershy</a>

<a href="http://t02.deviantart.net/3nw-fOth2hVnTnPyGp9b-CTMAdI=/fit-in/300x900/filters:no_upscale():origin()/pre03/4d4e/th/pre/i/2015/056/7/8/pinkie_pie_eqg__wondercolts_pose_by_caliazian-d6mznqo.png" target="_blank" class="preview">Pinkie</a>

<a href="http://orig08.deviantart.net/ba65/f/2013/186/b/5/egq_rarity_vector_by_unicornrarity-d6c4uav.png" target="_blank" class="preview">Rarity</a>

<a href="http://orig01.deviantart.net/6eb7/f/2014/003/b/2/twilight_sparkle_equestria_girls__blush__by_emerald_ray-d6qyey0.png" target="_blank" class="preview">Twilight</a>

<div class="previewBox">
  
  <img src="" />
  
</div>

这篇关于图像预览框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！