html - 图像预览框

Question

我的 CSS(或 jQuery？)中的图像预览有问题。

请在顶部查看正确的示例页面，在底部查看我的困惑页面:

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

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

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

---

这是我的全部代码。我从本教程中获取了整个预览框:
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);
}

Answer 1

鼠标悬停脚本上的图像预览

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

在页面加载时启动脚本

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