使用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