91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用jquery怎么實現圖片懸浮效果

發布時間:2021-04-15 18:09:49 來源:億速云 閱讀:199 作者:Leah 欄目:開發技術

使用jquery怎么實現圖片懸浮效果?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。

代碼部分

<!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>

看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

大港区| 江川县| 黔西县| 库伦旗| 兴安盟| 大埔区| 洛阳市| 罗田县| 榕江县| 公主岭市| 泰来县| 元江| 铅山县| 体育| 西乌珠穆沁旗| 水城县| 嘉荫县| 翁源县| 沭阳县| 汕尾市| 上饶市| 年辖:市辖区| 登封市| 山阳县| 太仆寺旗| 佳木斯市| 福建省| 土默特左旗| 滨州市| 石台县| 滕州市| 调兵山市| 南涧| 晋宁县| 华安县| 湖州市| 镇远县| 吉林省| 祁连县| 永修县| 石楼县|