Question

当我的鼠标在我的DIV中向左或向右移动时，我想要加载两张图像。我无法弄清楚它的淡入淡出，因为我希望新的图像在悬停时淡入并淡出。请帮忙！目前淡入淡出并没有起作用，我似乎无法弄清楚:(我在过去两天刚刚学会了JS，所以任何noob帮助都会很棒！

<div id="infruition-rollover">
<img id="default" src="" width="990" height="411"/>
<img class="off" src="InfruitionWIAYLeftRollover.jpg" width="990" height="411" />
<img class="off" src="InfruitionWIAYRightRollover.jpg" width="990" height="411" />
</div>
</body>

<script language="javascript" src="jquery-1.11.1.min.js"></script>
<script>
console.log("hello!");

$(document).ready(function() {
$('#default').attr('src','InfruitionWIAYNoRollover.jpg');

$('#infruition-rollover').mousemove(function(e){
    if (e.pageX < 450) {
        console.log("Entered Left: "+e.pageX);
        $('#default').fadeIn(100,function() {
        $(this).attr('src','InfruitionWIAYLeftRollover.jpg');
        })
        }
    else {
        console.log("Entered Right: "+e.pageX);
        $('#default').fadeIn(100,function() {
            $(this).attr('src','InfruitionWIAYRightRollover.jpg');})

        }
})
})
</script>

Answer 1

检查我为你做的这个例子：

HTML

<div id="infruition-rollover">
<img id="default" src="" width="990" height="411"/>
<img class="off" src="http://www-static.weddingbee.com/pics/36694/head.jpeg" width="100" height="100" />
<img class="off" src="http://www.random.org/analysis/randbitmap-rdo.png" width="100" height="100" />
</div>

JAVASCRIPT

console.log("hello!");

$(document).ready(function() {
$('#default').attr('src','InfruitionWIAYNoRollover.jpg');

$('#infruition-rollover').mousemove(function(e){
    if (e.pageX < 100) {
        console.log("Entered Left: "+e.pageX);
        $('#default').fadeIn(100,function() {
        $(this).attr('src','http://www-static.weddingbee.com/pics/36694/head.jpeg');
        })
        }
    else {
        console.log("Entered Right: "+e.pageX);
        $('#default').fadeIn(100,function() {
        $(this).attr('src','http://www.random.org/analysis/randbitmap-rdo.png');

        })

        }
})
})

JSFIDDLE

jQuery替换鼠标悬停在左侧，右侧的图像

1 个答案: