JavaScript和jQuery制作光棒效果
更新时间：2017年02月24日 09:36:22 作者："半城繁华半城伤"
本文主要介绍了使用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中有自动遍历效果，所有省了循环）
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
要返回上一页再刷新页面我们用到最多的是在像php,asp,jsp,asp.net中，下面我来给大家先介绍js 返回前一页并刷新页面，然后再把这些代码放在php中实现删除后返回当前页面并刷新页面2020-09-09
项目需要做了如下的东西，希望能给其他需要的同学们一点参考。2010-08-08
这篇文章主要介绍了JS实现为动态添加的元素增加事件功能,结合实例形式分析了javascript基于事件委托实现针对动态添加的元素增加事件的相关操作技巧,需要的朋友可以参考下2018-03-03
在 JavaScript 开发中,对象和数组的复制是一个非常常见的操作,无论是函数参数传递、状态管理,还是避免不必要的副作用,了解和掌握各种复制方式至关重要,我们将系统梳理 JavaScript 中的几种常见复制方法,并对其应用场景进行详细说明,需要的朋友可以参考下2024-10-10
这篇文章主要为大家详细介绍了js实现无缝轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
JavaScript是一种广泛使用的脚本语言,为网页添加交互性和动态功能提供了强大的支持,在本文中,我们将深入了解JavaScript的基本概念和用法,包括它在HTML中的书写位置、注释和结束符的使用,以及一种常用的函数——alert语句,感兴趣的朋友一起看看吧2023-09-09
下面小编就为大家带来一篇JS操作时间 - UNIX时间戳的简单介绍(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "w
这篇文章主要介绍了微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法,简单分析了wx:for警告提示相关解决方法,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了JS实现可点击展开与关闭的左侧广告代码,通过鼠标onClick事件调用自定义javascript函数实现页面元素及样式的显示与隐藏效果,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要为大家详细介绍了js编写轮播图效果的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
最新评论