Question

我已在这里问了一个问题 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>

Answer 1

如果您只是在悬停时放大一些东西，可以使用纯CSS

来完成

＆＃13;

<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>

<div class="MyBox">
  <div class="slider">
    <img class="MyPhoto" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
    <img class="MyPhoto" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
    <img class="MyPhoto" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </div>
</div>

＆＃13;

{
  title: 'Teste1',
  start: new Date(y, m, d, 10, 30),
  allDay: false,
  editable: false,
  backgroundColor: '#SomeColor'
},
{
  title: 'Teste2',
  start: new Date(y, m, d, 11, 40),
  allDay: false,
  backgroundColor: '#SomeOtherColor'
}

＆＃13;

Answer 2

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

 })

});

如何从滑块放大图像

2 个答案: