JS:图像翻转

JS: Image rollover

本文关键字：翻转 图像 JS      更新时间：2023-09-26

我试图用jQuery中的鼠标悬停事件来代替img的src。然而，我的控制台错误显示$(…)为空。

有谁能帮帮我吗?谢谢你。

这是我的项目:

var $ = function (id) {
    return document.getElementById(id);
}
window.onload = function () {
var listNode = $("#image_rollovers img");
    $(document).ready(function() {
        listNode.each(function() {
            var oldURL = $(this).attr("src");
            var newURL = $(this).attr("id");
            var rolloverImage = new Image();
            rolloverImage.src = newURL;
            $(this).hover(
                function() {
                    $(this).attr("src", newURL);
                },
                function() {
                    $(this).attr("src", oldURL);
                }
);
});
});
}
https://jsfiddle.net/rn70Lqrr/

Javascript中有很多不必要的代码。我更新了JFiddle来解决这个问题。基本上不需要id函数，需要包含JQuery。你试图遍历list对象，而你真正想做的是遍历图像。

这里是更新后的小提琴的链接:

https://jsfiddle.net/tuboaLnd/2/

，这里是更新后的Jquery代码:

$(document).ready(function() {
    var listNode = $("#image_rollovers li img");               
    listNode.each(function() {
        var oldURL = $(this).attr("src");
        var newURL = $(this).attr("id");
        var rolloverImage = new Image();
        rolloverImage.src = newURL;
        $(this).hover(
            function() {
                $(this).attr("src", newURL);
            },
            function() {
                $(this).attr("src", oldURL);
            }
        );
    });
});

我第二个SalientGreen。他比我跑得快。:)我不会更新他的代码，但我让它像这样工作....

HTML(注意我添加的两个数据属性)

    <h1>Image Rollovers</h1>
    <ul id="image_rollovers">
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" alt="" data-src="https://upload.wikimedia.org/wikipedia/en/6/6b/LifestylePodnetwork-250x250.png" data-old="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" /></li>
    </ul>
Javascript: 

$(document).ready(function(){
  $('img').hover(
    function() {
      $(this).attr("src", $(this).data("src"));
    }, function() {
      $(this).attr("src", $(this).data("old"));
    }
  );
});

也许这在将来会对你有帮助。:)

我是这样做的:

$(document).ready(function () {
    // Preload images
    $('img[data-rollover-src]').each(function(img){
        var newURL = $(this).data('rollover-src');
        var rolloverImage = new Image();
        rolloverImage.src = newURL;       
    });
    
    $(document).on('mouseenter mouseleave','img[data-rollover-src]',function() {
        var oldUrl = $(this).attr('src');
        var newUrl = $(this).data('rollover-src');
        $(this).attr('src',newUrl).data('rollover-src',oldUrl);
    });
});
/* the default styles for the document */
 body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    padding: 20px;
    width: 190px;
    border: 3px solid blue;
}
h1, ul {
    margin: 0;
    padding: 0;
}
h1 {
    padding-bottom: .5em;
}
img {
    height: 175px;
}
/* the styles for the center content */
 section {
}
li {
    padding-right: 10px;
    display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    	<h1>Image Rollovers</h1>
    <ul>
        <li>
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" alt="" 
                 data-rollover-src="https://upload.wikimedia.org/wikipedia/en/6/6b/LifestylePodnetwork-250x250.png">
        </li>
    </ul>
</section>

你有

listNode = $("image_rollovers");

应该是

listNode = $("#image_rollovers");

你错过了'#'

据我所知，有一个js文件丢失在你的小提琴:

 <script src="rollover.js"></script>
相关文章：