JavaScript和jQuery制作光棒效果


Posted in Javascript onFebruary 24, 2017

使用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中有自动遍历效果,所有省了循环)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 #Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 #Javascript
JavaScript中三种常见的排序方法
Feb 24 #Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 #Javascript
Bootstrap3多级下拉菜单
Feb 24 #Javascript
使用原生的javascript来实现轮播图
Feb 24 #Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 #Javascript
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现BackPropagation算法
2017/12/14 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python递归函数绘制分形树的方法
2018/06/22 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python实现Zabbix-API监控
2018/09/17 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
python3实现逐字输出的方法
2019/01/23 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
机关财务管理制度
2014/01/17 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
超市食品安全承诺书
2015/04/29 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
JavaScript原型链详解
2021/11/07 Javascript
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
php解析非标准json、非规范json的方式实例
2022/05/10 PHP