欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery插件實(shí)現(xiàn)圖片懸浮

 更新時(shí)間：2021年04月15日 17:35:05   作者：阿飛超努力  
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片懸浮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery插件實(shí)現(xiàn)圖片懸浮的具體代碼，供大家參考，具體內(nèi)容如下

很常見(jiàn)的一個(gè)效果，就是點(diǎn)擊之后圖片懸浮出來(lái)展示

效果如下

代碼部分

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>做圖片懸浮</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   * {
    margin: 0px;
    padding: 0px;
    user-select: none;
   }

   ul {
    margin-left: 20px;
   }
   ul li{
    width: 200px;
   }
   li img {
    width: 100%;
   }
   .float{
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    list-style: none;
    z-index: 99;
   }
   .float::before{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 98;
   }
  </style>
 </head>
 <body>
  <ul>
   <li class="li"><img src="img/1.png" /></li>
   <li class="li"><img src="img/2.png" /></li>
   <li class="li"><img src="img/3.png" /></li>
   <li class="li"><img src="img/4.png" /></li>
  </ul>
 </body>
</html>
<script>
 $(".li").click(function() {
  $(this).toggleClass('float')
 })
</script>

思路解釋

就是從一個(gè)狀態(tài)變道另外一個(gè)狀態(tài)，給予和拿走一個(gè)類的事。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論