Question

使用一个简单的imagePreview脚本来预览更大尺寸的图像，但它是一个非常简单的图像。作为完整尺寸的来源，

如何更改它以使链接无法点击，我试过更换一个。有跨度。但是预览没有加载。

HTML代码：

<div class="image"><a href="https://www.google.com/images/srpr/logo11w.png" class="preview"><img src="https://www.google.com/images/srpr/logo11w.png"/></a></div>

使用Javascript：

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
    $("a.preview").hover(function(e){
        $("body").append("<p id='preview'><img src='"+ this.href +"'/></p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};
$(document).ready(function(){
    imagePreview();
});

CSS：

.image {
float: left;
padding: 0px 10px 10px 0px;
}

.image img {
max-width: 240px;
max-height: 290px;
}

#preview{
position:absolute;
border:1px solid #0096B8;
background:#0096B8;
padding:5px;
display:none;
color:#fff;
max-width:500px;
border-radius: 4px;
}

#preview img {
max-width:500px;
}

Answer 1

使用event.preventDefault()阻止按钮单击时的浏览器默认操作

$('a.preview').click(function(e){
    e.preventDefault();
})

文档： http://api.jquery.com/event.preventdefault/

或使用return false;

$('a.preview').click(function(e){
    return false;
})

Fiddle Demo

Answer 2

您可以使用跨度，但跨度没有href属性。访问href - 属性（在这种情况下，您可以选择任何属性名称）：

$(this).attr('href');

http://jsfiddle.net/7FLbU/5/

Answer 3

试试这个，这里有一些代码，

<div class="image"><a href="#" class="preview"><img src="https://www.google.com/images/srpr/logo11w.png"/></a></div>

使用Javascript：

    this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
    $("a.preview").hover(function(e){
        $("body").append("<p id='preview'><img src='"+ $(this).find('img').attr('src') +"'/></p>");                              
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");    
        e.preventDefault();
    },
    function(){
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};
$(document).ready(function(){
    imagePreview();
});

http://jsfiddle.net/7FLbU/8/

如何使imagePreview无法点击

3 个答案: