Image preview box | 易学教程

问题

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);
}

回答1:

Image preview on mouseover script

jQuery

this.imagePreview = function(){ 

    xOffset = 10;
    yOffset = 30;

    // these 2 variable determine popup's distance

$("a.preview").hover(function(e){
    this.t = this.title;
    this.title = "";    
    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");                        
    },

function(){
    this.title = this.t;    
    $("#preview").remove();
    });

    $("a.preview").mousemove(function(e){
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
  });
};

starting the script on page load

$(document).ready(function(){
imagePreview();
});

回答2:

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>

来源：https://stackoverflow.com/questions/39661956/image-preview-box

标签

html

css

preview