当前位置: 首页 > 编程笔记 >

JavaScript和jQuery制作光棒效果

孔宇
2023-03-14
本文向大家介绍JavaScript和jQuery制作光棒效果,包括了JavaScript和jQuery制作光棒效果的使用技巧和注意事项,需要的朋友参考一下

使用javaScript与jQuery添加CSS样式的区别和步骤

使用javaScript制作光棒效果

--首先是javaScript

<script>
    $(function () {
      var lis = document.getElementsByTagName("li"); //定义DOM变量接受标签为li的元素
      for (var i = 0; i < lis.length;i++){      
        lis[i].onmouseover = function () {
          //方式一
          //this.style.backGround = "pink";   //1,注意这里只能使用this方法作为for循环当前遍历项
          //this.style.fontSize = "50px";   //2,同样style之后的追加的样式命名只能用骆驼命名法
          //方式二
          this.style.cssText = "background-color:red;font-size:50px";
        };
        lis[i].onmouseout = function () {
          //方式一
          //this.style.background = "";
          //this.style.fontSize = "20px";
          //方式二
          this.style.cssText = "background-color:;font-size:20px";
        }
      }
    });
  </script>

两种方式相比相对来说:.cssText比较简便

使用jQuery制作光棒效果

 <script>
    $(function () {
      $("li").hover(function () {                  //这里调用复合事件 模拟鼠标悬停事件
        $(this).css({"background-color": "red","font-size":"50px"});
      },
      function () {
        $(this).css({ "background-color": "", "font-size": "20px" });  //直接追加CSS样式
      }
      );
    });
  </script>

相对于javaScript  jQuer代码更灵活,简便一些,(jQuery中有自动遍历效果,所有省了循环)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍jQuery制作效果超棒的手风琴折叠菜单,包括了jQuery制作效果超棒的手风琴折叠菜单的使用技巧和注意事项,需要的朋友参考一下 拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进 演示图: main.js index.html style.css 以上所述就是本文给大家分享的全部内容了,希望能够对大家学习jQuery有所帮助。

  • 本文向大家介绍非常棒的jQuery图片轮播效果,包括了非常棒的jQuery图片轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下 购物产品展示:图片轮播器,效果如下所示: 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:      最外层容器区域,如上图红色线框矩形      选项卡区域 两个事件:     

  • 本文向大家介绍jQuery制作图片旋转效果,包括了jQuery制作图片旋转效果的使用技巧和注意事项,需要的朋友参考一下 以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片旋转的半径 (2)图片旋转的过程需要用到setInterval()方法,来获取每

  • 本文向大家介绍JavaScript制作弹出层效果,包括了JavaScript制作弹出层效果的使用技巧和注意事项,需要的朋友参考一下 先给大家展示下效果图,效果图如下所示: 1.引用相关easyui.min.js,easyui-lang-zh_CN.js 等js 文件; 2.前台代码 3.js 代码 4.选择信息时,可双击 也可单击点确认。 以上所述是小编给大家介绍的JavaScript制作弹出层效

  • 本文向大家介绍jquery制作LED 时钟特效,包括了jquery制作LED 时钟特效的使用技巧和注意事项,需要的朋友参考一下 以下是HTML文件源代码: 使用: 引用jquery.KeleyiLCDClock.css文件和jquery.KeleyiLCDClock.js文件。 然后定义div的id,比如keleyitime,接着设置时间与使用KeleyiLCDClock()方法。 $("#kel

  • 本文向大家介绍使用jquery制作弹出框效果,包括了使用jquery制作弹出框效果的使用技巧和注意事项,需要的朋友参考一下 非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有: alert:普通提示(警告)对话框 confirm:询问(确认)对话框 message:简单消息对话框(无title、无按钮) ifram