我發現此腳本HERE將透明圖像覆蓋在我想「保護」我的網站上的照片上。在有超鏈接的圖片上,我希望能夠給他們一個特殊的課程並讓他們可以訪問。'疊加透明圖像'jQuery在添加新類時中斷
這裏是原始腳本:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var pixelSource = 'http://static.squarespace.com/static/51c351f0e4b0c89ff2b61cb8/t/52cc3905e4b0167d33cd524e/1389115653884/Transparent.gif';
var useOnAllImages = true;
// Preload the pixel
var preload = new Image();
preload.src = pixelSource;
$('img').live('mouseenter touchstart', function(e) {
// Only execute if this is not an overlay or skipped
var img = $(this);
if (img.hasClass('protectionOverlay')) return;
if (!useOnAllImages && !img.hasClass('protectMe')) return;
// Get the real image's position, add an overlay
var pos = img.offset();
var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() {
setTimeout(function(){ overlay.remove(); }, 0, $(this));
});
if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
});
});
</script>
我被告知要改變這一行:
$('img').live('mouseenter touchstart', function(e) {
要這樣:
$('img').not('.FreeMe').live('mouseenter touchstart', function(e) {
...並給我的圖像想要點擊「.FreeMe」類。
當我沒有改變的情況下運行腳本時,透明疊加效果很好。一旦我改變了那行代碼並添加了特殊類,所有的圖像都可以再次訪問並且腳本不再起作用。
HERE是指向我一直在處理的頁面的鏈接。屏幕底部的攝影師信息是我想要添加超鏈接的圖像。
我一直在尋找高和低,爲了使這項工作,但無法找到解決問題的辦法。我對Javascript和jQuery非常陌生,但在CSS和HTML中足夠了解它是危險的。
我很感謝你們所有人都能提供的幫助。
小心,如果你打算更新jQuery的:在jQuery 1.7,的'.live()'方法已經過時了。使用'.on()'附加事件處理程序。 – Bigood
謝謝Bigood,瞭解相關信息! – ESGD