憋屈一些JavaScript - 顯示圖像上的鼠標懸停文字

我想以更簡單的方式來複制http://www.annedeckerarchitects.com/recognition/publications/此頁面的功能。我所指的功能是在右邊的東西上進行鼠標移動，並改變左邊的圖像。憋屈一些JavaScript - 顯示圖像上的鼠標懸停文字

我有; https://jsfiddle.net/7j2zkndx/3/

HTML：

<img class="global-image" /> 
<div class="scrolling-list"> 
<ul> 
    <li data-link="http://i.imgur.com/ne3L7hy.jpg">Link Test <a href="#">click for more</a></li> 
    <li data-link="http://i.imgur.com/mwa1Wwl.jpg">Link Test 2 <a href="#">click for more</a></li> 
</ul> 
</div>

的JavaScript;

var globalImage = $(".global-image").first(); 
$(".scrolling-list>li").each(function() { 
    var list = this; 
    var img = document.CreateElement("img"); 
    img.src = $(list).getAttribute("data-link"); 
    img.addEventListener("load", function() { 
     list.addEventListener("mouseOver", function() { 
      globalImage.src = $(list).getAttribute("data-link"); 
     }); 
    }); 
}();

CSS;

.scrolling-list { 
    width: 600px; 
    height: 600px; 
    overflow: scroll; 
} 
.global-image. .scrolling-list { 
    display: inline-block; 
}

我老實說不知道爲什麼它不工作。最好假設我是JS的新手。

謝謝。

來源

2017-06-07 amscd

globalImage是一個jQuery集合。 globalImage.src不會更改元素的src屬性。使用jQuery的attr函數來設置它。此外，你需要更加小心你的大小寫。 mouseOver應mouseover，CreateElement應該是createElement。

$(".scrolling-list>li")只適用於您的<ul>是<ul class="scrolling-list">。

最後，如果在添加onload事件處理程序之前分配了img.src，則可能會出現問題。如果圖像緩存，它可能在此之前還有一個處理程序，這意味着你的代碼不能執行在所有完成加載。

Fiddle

var globalImage = $(".global-image").first(); 
$(".scrolling-list>li").each(function() { 
    var list = this; 
    var img = document.createElement("img"); 

    img.addEventListener("load", function() { 
     list.addEventListener("mouseover", function() { 
      globalImage.attr("src", $(list).attr("data-link")); 
     }); 
    }); 
    img.src = $(list).attr("data-link"); 
    console.log(img.src); 
});

來源

2017-06-07 02:11:23

另一種解決辦法，如果你要綁定：

HTML：

<img class="global-image" /> 
<div> 
    <ul class="scrolling-list"> 
     <li data-link="https://i.imgur.com/ne3L7hy.jpg">Link Test <a href="#" class="aToBind">click for more</a></li> 
     <li data-link="https://i.imgur.com/mwa1Wwl.jpg">Link Test 2 <a href="#" class="aToBind">click for more</a></li> 
    </ul> 
</div>

的Javascript：

$("a.aToBind").mouseover(function(){ 
    let liParent = $(this).parent("li"); 
    $(".global-image").attr("src", $(liParent).attr("data-link")); 
})

類「aToBind」只用於在腳本的其餘部分將這些「a」與其他「a」分開。

來源

2017-06-07 02:29:32 vanessa

憋屈一些JavaScript - 顯示圖像上的鼠標懸停文字

回答

相關問題