jQuery 点击点亮图片特效代码

创客云


jQuery点击点亮图片代码是一款基于jQuery+CSS3实现的为武汉加油点亮图片特效。主要应用场景是你想增加乐趣或者最近很火的题材“点亮”的主题,还是很受欢迎的。以前是用JS和Div,现在用HTML5和CSS3,代码简化了不少,效果却更流畅了。

  1. <link rel="stylesheet" href="css/index.css">
  2. <script src="js/jquery.min.js"></script>
  3. <h1>4月8日武汉解封,一起点亮武汉</h1>
  4. <div class="main">
  5.     <div id="box1" class="box">
  6.         <img src="images/1.jpg" class="pic">
  7.     </div>
  8.     <div id="box2" class="box">
  9.         <img src="images/2.jpg" class="pic">
  10.     </div>
  11.     <div id="box3" class="box">
  12.         <img src="images/3.jpg" class="pic">
  13.     </div>
  14.     <div id="box4" class="box">
  15.         <img src="images/4.jpg" class="pic">
  16.     </div>
  17.     <div id="box5" class="box">
  18.         <img src="images/5.jpg" class="pic">
  19.     </div>
  20.     <div id="box6" class="box">
  21.         <img src="images/6.jpg" class="pic">
  22.     </div>
  23. </div>
  24. <script>
  25.     $().ready(function () {
  26.         $('img').click(function () {
  27.             $(this).addClass('show')
  28.         })
  29.     })
  30. </script>
  31. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  32. </div>
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60116.html
云模板

发表评论