gpt4 book ai didi

javascript - 如何放大 slider 中的图像

转载 作者:行者123 更新时间:2023-11-28 06:26:15 24 4
gpt4 key购买 nike

我已经在这里问了一个问题 https://stackoverflow.com/questions/35024225/how-to-enlarge-image-of-slider 。但我没有得到答复。现在我已经找到解决方案了。它运作良好。但我需要简化这段代码底部的jquery。请任何人帮忙。

<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="sss/sss.min.js"></script>
<link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">
<script>
jQuery(function($) {
$('.slider').sss();
});
</script>
</head>
<body>
<?php for($z=1;$z<3;$z++){;?>
<div class="MyBox<?php echo $z;?>" style="width:150px;height:200px;">
<div class="slider">
<img class="MyPhoto<?php echo $z;?>" src="MyPics/image1.jpg" style="height:200px;width:150px;"/>
<img class="MyPhoto<?php echo $z;?>" src="MyPics/image2.jpg" style="height:200px;width:150px;"/>
<img class="MyPhoto<?php echo $z;?>" src="MyPics/image3.jpg" style="height:200px;width:150px;"/>
</div>
</div>
<?php }?>
<script>

$(".MyBox1").on( "mouseover", function() {
$(".MyBox1").css( "width", "+=400" );
$(".MyBox1").css( "height", "+=400" );
$(".MyPhoto1").css( "width", "+=400" );
$(".MyPhoto1").css( "height", "+=400" );
});


$(".MyBox1").on( "mouseout", function() {
$(".MyBox1").css( "width", "-=400" );
$(".MyBox1").css( "height", "-=400" );
$(".MyPhoto1").css( "width", "-=400" );
$(".MyPhoto1").css( "height", "-=400" );

});

$(".MyBox2").on( "mouseover", function() {
$(".MyBox2").css( "width", "+=400" );
$(".MyBox2").css( "height", "+=400" );
$(".MyPhoto2").css( "width", "+=400" );
$(".MyPhoto2").css( "height", "+=400" );
});


$(".MyBox2").on( "mouseout", function() {
$(".MyBox2").css( "width", "-=400" );
$(".MyBox2").css( "height", "-=400" );
$(".MyPhoto2").css( "width", "-=400" );
$(".MyPhoto2").css( "height", "-=400" );

});
</script>
</body>
</html>

最佳答案

这是简化的 jQuery 版本:

$(function(){

var myBox1 = $(".MyBox1"),
myBox2 = $(".MyBox2"),
myPhoto1 = $(".MyPhoto1"),
myPhoto2 = $(".MyPhoto2");

$(document).on('mouseover mouseout', '.MyBox1, .MyBox2', function(e){

var styleValue = (e.type === 'mouseover') ? "+=400" : "-=400";

if( e.currentTarget.className == 'MyBox1' ){

myBox1.css({
"width" : styleValue,
"height" : styleValue
});

myPhoto1.css({
"width" : styleValue,
"height" : styleValue
});

} else {

myBox2.css({
"width" : styleValue,
"height" : styleValue
});

myPhoto2.css({
"width" : styleValue,
"height" : styleValue
});
}

})

});

关于javascript - 如何放大 slider 中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35105858/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com