Question

我吮吸jquery和js，当我将鼠标悬停在我的图库中的任何图像上时，我正试图创建一个放大效果。代码如下：

HTML：

<section class="wrapper special" id="two">
    <div class="inner">
        <header class="major narrow">
            <h2>More Pictures/Works</h2>
            <p>Ipsum dolor tempus commodo turpis adipiscing Tempor placerat sed amet accumsan</p>
        </header>
        <div class="image-grid">
            <a class="image" href="#"><img alt="" src="images/pic01.jpg"></a>
            <a class="image" href="#"><img alt="" src="images/pic02.jpg"></a>
            <a class="image" href="#"><img alt="" src="images/pic03.jpg"></a>
            <a class="image" href="#"><img alt="" src="images/pic04.jpg"></a>
            <a class="image" href="#"><img alt="" src="images/pic5.jpg"></a>
        </div>
    </div>
</section>

CSS：

.image-grid {
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 4em;
}
.image-grid .image {
    margin: 0;
    width: 25%;
}
.image-grid .image img {
    width: 100%;
}

提前致谢！

Answer 1

试试这个小提琴：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="clientData[first]">
  <option value="0">without</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<input type="text" name="clientData[second]">

https://jsfiddle.net/msgzb3km/1/

基本上，当鼠标在图像上移动时，它会添加一个特殊的类。您可以定义类，以便随时增加图像大小。第二个javascript告诉jQuery在你移出鼠标后删除代码。

希望这有帮助。

Answer 2

当你想在项目上使用jQuery做其他事情时，你可以通过创建一个定义动画的过渡类来实现这一点：

.transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

在悬停时悬停分配此类：

$(document).ready(function(){
    $('.image').hover(function() {
        $(this).addClass('transition');
        // other code     
    }, function() {
        $(this).removeClass('transition');
    });
  });

您可以在此处找到示例：https://jsfiddle.net/1Lm3px2g/

但这有点矫枉过正，因为你可以通过定义:hover来获得相同的结果 - 使用像Mohamed-Yousef建议的CSS样式。

.image-grid .image:hover {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

示例：https://jsfiddle.net/mohamedyousef1980/1Lm3px2g/1/

使用jquery悬停缩放图像

2 个答案: