如何从滑块放大图像

yaseen ahmed 发表于 Dev

亚森·艾哈迈德（Yaseen Ahmed）

我已经在这里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>

smkrtchyan

这是简化的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
     });
   }

 })

});