如何通過jQuery的

引用擴展Highslide對象我想創建一個小功能，讓用戶在任何地方點擊網頁上的關閉通過highslide創建的放大圖像。彈出的錯誤是當圖片無法完全展開時，您可以選擇將其展開爲全尺寸或將其保留在瀏覽器的範圍內，但是，我會在觸發任何點擊事件時觸發highslide元素。我想出了這個工作，但仍然存在一些問題。如何通過jQuery的

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script type="text/javascript" src="/hs/highslide/highslide-full.js"></script> 
<link rel="stylesheet" type="text/css" href="/hs/highslide/highslide.css" /> 


<script type="text/javascript">                                                     
var mState=false;                                                        
$(document).click(function() {                                                    
    hs.Expander.prototype.onMouseOver = function() {                                                
    mState = false;                                                        
    console.log('over') };                                                      
    hs.Expander.prototype.onMouseOut = function() {                                                
    mState = true;                                                        
    console.log('out') };                                                      
    console.log(mState);                                                       
    if (mState) hs.close();                                                      
}); </script> 

<a href="/pub/opdc/p0000/tall.jpg" class="highslide" onclick="return hs.expand(this)"> 
<img src="/pub/opdc/p0000/tall_t.jpg" alt="Highslide JS" align="right"></a>

我只是剛開始學習Java腳本/ jQuery和highslide所以我爲不好的做法道歉。 Console.log嚴格用於調試並將被刪除。

我的問題具體如下。我想通過jQuery引用擴展的highslide圖像，所以我不必使用highslide的鼠標事件。我發現他們是不可預測的，我現在沒有時間確切地說明他們如何工作，爲什麼我沒有看到我想要的結果。

希望這一切是有道理的，預先感謝您的任何和所有援助。

來源

2016-07-22 Turk

這是難以重現......你能創造一個小提琴或CodePen？併發布什麼是'hs'。 –

對於那些有興趣在具有一個問題，這個小心靈拼圖的樂趣，這是我在我的網站上運行現在加入最終和有源代碼「點擊關閉」功能，而不使用調光方法。

<script type="text/javascript"> 
    var mState=false; 
    hs.Expander.prototype.onMouseOver = function() { mState = false; } 
    hs.Expander.prototype.onMouseOut = function() { mState = true; } 
    jQuery(document).click(function() { 
    if (mState) { 
     hs.close(); 
     mState = false; 
    } 
    }); 
</script>

對於此代碼的工作，你需要使用highslide-full.js。我希望這能幫助別人，或者爲你提供一些和我一樣的樂趣。

來源

2016-07-26 15:20:50 Turk

也許我失去了一些東西，但我不明白爲什麼你要推倒重來。 Highslide JS已經內置了該功能。如果將調光不透明度設置爲任何非零值，則單擊頁面上的任意位置將關閉擴展器。

<script type="text/javascript"> 
    hs.dimmingOpacity = 0.75; 
</script> 
<style type="text/css"> 
.highslide-dimming { 
    background: black; 
} 
</style>

如果您實際上不想要變暗的背景，只需將該值設置爲0.0001。

來源

2016-07-24 02:30:11 MisterNeutron

對我來說，感覺就像一個騙子的方法，我喜歡我的代碼有一個目的，並有效地執行該目的。調光器的主要功能是調暗屏幕背景，作爲方法的副產品，它也恰好關閉屏幕。我結束瞭解決這個問題，我需要關閉圖像後默認我的鼠標標誌返回false，它現在工作得很好。 – Turk

你想讓頁面以某種方式行事，還是你更關心一些神祕的代碼純度？使用jQuery是「騙子方法」。你正在介紹一個不必要的腳本來完成Highslide JS已經可以完成的事情。愛開銷多少？ – MisterNeutron

我會說我落入神話的代碼純度領域比任何東西更多。除此之外，也是我的老闆喜歡寫代碼來完成工作，並且從他的思維方式來看，使用調光器並不能正確地完成工作。我同意使用調光器是很有意義的，因爲它很簡單，乾淨，並且完全符合我的需求。但是這裏的規則很緊張，所以我從一開始就要走更長的路。此外，我試圖強迫自己解決這樣的奇怪問題，所以我可以學習所有這些工具的API，我很新。 – Turk

這裏是你如何能做到這一點，而無需拖動jQuery的混進去，只使用Highslide JS提供的工具，而不必使用偷偷摸摸的快捷鍵是「得罪」：

hs.addEventListener(document, 'click', function(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 

    // if the target element is not within an expander but there is an expander on the page, close it 
    if (!hs.getExpander(target) && hs.getExpander()) hs.close(); 
});

（原帖六年前托爾斯泰的Highslide JS開發者。）

來源

2016-07-26 18:29:01 MisterNeutron

如何通過jQuery的

回答

相關問題