Jquery圖像預覽插件

我使用這個「插件」在網上找到預覽一些圖像在PHP/Linux網站。Jquery圖像預覽插件

<script type="text/javascript"> 
function pimg() 
{ 
    this.xOffset = 5; 
    this.yOffset = 50; 
    $("a.pimg").hover(function (e) 
    { 
     this.img_title = this.title; 
     this.title = ""; 
     var img_src = $(this).attr('img_src'); 
     var desc = (this.img_title != "") ? "<h3>" + this.img_title + "</h3>" : ""; 
     var image = (img_src) ? img_src : this.src; 
     $("body").append("<div id='pimg'><img src='" + image + "' alt='Image preview' />" + desc + "</div>"); 
     $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); 
     $("#pimg").fadeIn(700); 
    }, function() 
    { 
     this.title = this.img_title; 
     $("#pimg").remove(); 
    }); 
    $("a.pimg").mousemove(function (e) 
    { 
     $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); 
    }); 
}; 
$(document).ready(function($){ 
    pimg(); 
}) 
</script>

<div class="images"> 
        <a href="#" img_src='<?=TF?>/img/design/testimonials/Tuscg.png' class="pimg">View Testimonial</a> 
      </div>

我要的是使圖像預覽出現在可見的瀏覽器窗口中，並沒有爲它創造新的空間（在情況下，像該鏈接是在瀏覽器窗口的右下角）。我知道我必須玩這個定位，但是怎麼做才能讓圖像只出現在瀏覽器窗口的當前可見內容中。

謝謝！

來源

2011-05-11 Andrei Stanca

你的代碼沒問題。你只需要添加到你的CSS樣式（DEMO）

#pimg{position:absolute;display:none;}

從

除此之外，你只需要修改這個代碼，以正確的x/y座標，你的願望。

$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");

來源

2011-05-11 11:06:23 Dutchie432

我需要的是如何在px或％中爲#pimg提供正確值以便預覽圖像顯示的示例僅在瀏覽器窗口的可視區域內，並且不能擴展窗口或可視區域外部。 – 2011-05-11 11:23:18

爲什麼不只是在jquery中進行檢查。檢查div的邊界以及窗口的邊界。您需要'$（window）.width（）'，'$（window）.height（）'，'$（「＃pimg」）。position（）。top'，'$（「＃pimg」）。（）。left'，'$（「＃pimg」）。width（）'，'$（「＃pimg」）。height（）' – Dutchie432 2011-05-11 11:46:35

看看這個更新的小提琴：http://jsfiddle.net/Wp6bG/1/

在這個例子中（基於Dutchie432的原始小提琴修飾的），如果調整屏幕的寬度，預覽會從右到左，如果切換預覽將離開屏幕。您可以修改代碼以處理所有其他屏幕邊緣（上/左/下）。

來源

2011-05-11 11:47:04

Jquery圖像預覽插件

回答

相關問題