So erzielen Sie mit Layui Bildskalierungs- und Transparenzeffekte

So verwenden Sie Layui, um Bildskalierungs- und Transparenzeffekte zu erzielen

Layui ist ein Front-End-UI-Framework, das auf jQuery basiert. Es ist einfach, benutzerfreundlich und leistungsstark. Bei der Webentwicklung müssen wir häufig einige Effektverarbeitungen an Bildern durchführen, z. B. Skalierung und Transparenz. In diesem Artikel wird erläutert, wie Sie mit dem Layui-Framework diese beiden Effekte erzielen, und es werden spezifische Codebeispiele aufgeführt.

1. Bildskalierungseffekt

Zuerst müssen wir die Kerndateien und zugehörigen Stylesheets des Layui-Frameworks vorstellen. Fügen Sie den folgenden Code zum

<link rel="stylesheet" href="//res.layui.com/layui/v2.6.8/css/layui.css" media="all">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//res.layui.com/layui/v2.6.8/layui.all.js" charset="utf-8"></script>

Als nächstes können wir die Bildskalierungskomponente von Layui verwenden, um den Bildskalierungseffekt zu erzielen. Fügen Sie den folgenden Code im -Tag hinzu:

<div class="layui-row">
  <div class="layui-col-md3">
    <img  src="image.jpg" class="layui-img-zoom" alt="So erzielen Sie mit Layui Bildskalierungs- und Transparenzeffekte" >
  </div>
</div>

Im obigen Code legen wir das Bildelement als Zoomziel fest, indem wir das Klassenattribut hinzufügen. Als nächstes müssen wir den folgenden JS-Code hinzufügen, um die Layui-Komponente zu initialisieren:

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
  $(".layui-img-zoom").on("click", function(){
    var src = $(this).attr("src");
    layer.photos({
      photos: {
        data: [{
          src: src
        }]
      },
      anim: 5
    });
  });
});
</script>

Im obigen Code lösen wir den Bildzoomeffekt von Layui aus, indem wir das Klickereignis des Bildes abhören. Im Click-Ereignis erhalten wir das src-Attribut des Bildes und rufen die Methode „layer.photos“ auf, um den Zoomeffekt zu erzielen. Der Animationsparameter steuert den Animationsstil des Zoomeffekts. Hier verwenden wir den Fade-Effekt.

2. Bildtransparenzeffekt

Ähnlich wie beim Bildskalierungseffekt müssen wir auch zuerst die Kerndateien und zugehörigen Stylesheets des Layui-Frameworks vorstellen. Der Code lautet wie folgt:

<link rel="stylesheet" href="//res.layui.com/layui/v2.6.8/css/layui.css" media="all">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//res.layui.com/layui/v2.6.8/layui.all.js" charset="utf-8"></script>

Dann fügen Sie den folgenden Code im -Tag hinzu:

<div class="layui-row">
  <div class="layui-col-md3">
    <img  src="image.jpg" class="layui-img-transparent" alt="So erzielen Sie mit Layui Bildskalierungs- und Transparenzeffekte" >
  </div>
</div>

Im obigen Code definieren wir auch das Bildelement als Ziel des Transparenzeffekts, indem wir das Klassenattribut hinzufügen. Als nächstes müssen wir den folgenden JS-Code hinzufügen, um die Layui-Komponente zu initialisieren:

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
  $(".layui-img-transparent").hover(function(){
    var src = $(this).attr("src");
    layer.tips('透明效果', this, {
      tips: [1, '#000'],
      time: 2000
    });
    $(this).css("opacity", "0.5");
  }, function(){
    $(this).css("opacity", "1.0");
  });
});
</script>

Im obigen Code erreichen wir den Transparenzeffekt, wenn die Maus schwebt, indem wir das Hover-Ereignis der Maus abhören. Gleichzeitig haben wir die Methode „layer.tips“ verwendet, um ein Eingabeaufforderungsfeld zu öffnen, in dem die Textaufforderung „Transparenzeffekt“ angezeigt wird. Der Parameter „tips“ gibt den Stil des Eingabeaufforderungsfelds an und der Parameter „time“ steuert die Anzeigezeit des Eingabeaufforderungsfelds. In der Rückruffunktion des Hover-Ereignisses ändern wir die Transparenz des Bildes, indem wir den CSS-Stil ändern.

Durch das obige Codebeispiel können wir das Layui-Framework verwenden, um Bildskalierungs- und Transparenzeffekte zu erzielen. Diese Effekte verbessern nicht nur das Benutzererlebnis, sondern machen die Seite auch lebendiger und ansprechender. Gleichzeitig ermöglicht uns die Einfachheit und Benutzerfreundlichkeit des Layui-Frameworks, diese Effekte schnell zu erzielen. Wenn Sie sich für die Frontend-Entwicklung interessieren, können Sie auch das Layui-Framework ausprobieren und weitere Effekte und Funktionen erkunden.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit Layui Bildskalierungs- und Transparenzeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!