JavaScript和jQuery制作光棒效果
更新時間：2017年02月24日 09:36:22 作者："半城繁華半城傷"
本文主要介紹了使用javaScript和jQuery制作光棒效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
使用javaScript與jQuery添加CSS樣式的區(qū)別和步驟
使用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循環(huán)當前遍歷項
//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中有自動遍歷效果，所有省了循環(huán)）
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
要返回上一頁再刷新頁面我們用到最多的是在像php,asp,jsp,asp.net中，下面我來給大家先介紹js 返回前一頁并刷新頁面，然后再把這些代碼放在php中實現(xiàn)刪除后返回當前頁面并刷新頁面2020-09-09
項目需要做了如下的東西，希望能給其他需要的同學們一點參考。2010-08-08
JS實現(xiàn)為動態(tài)添加的元素增加事件功能示例【基于事件委托】
這篇文章主要介紹了JS實現(xiàn)為動態(tài)添加的元素增加事件功能,結合實例形式分析了javascript基于事件委托實現(xiàn)針對動態(tài)添加的元素增加事件的相關操作技巧,需要的朋友可以參考下2018-03-03
在 JavaScript 開發(fā)中,對象和數(shù)組的復制是一個非常常見的操作,無論是函數(shù)參數(shù)傳遞、狀態(tài)管理,還是避免不必要的副作用,了解和掌握各種復制方式至關重要,我們將系統(tǒng)梳理 JavaScript 中的幾種常見復制方法,并對其應用場景進行詳細說明,需要的朋友可以參考下2024-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)無縫輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript是一種廣泛使用的腳本語言,為網頁添加交互性和動態(tài)功能提供了強大的支持,在本文中,我們將深入了解JavaScript的基本概念和用法,包括它在HTML中的書寫位置、注釋和結束符的使用,以及一種常用的函數(shù)——alert語句,感興趣的朋友一起看看吧2023-09-09
下面小編就為大家?guī)硪黄狫S操作時間 - UNIX時間戳的簡單介紹(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧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實現(xiàn)可點擊展開與關閉的左側廣告代碼,通過鼠標onClick事件調用自定義javascript函數(shù)實現(xiàn)頁面元素及樣式的顯示與隱藏效果,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了js編寫輪播圖效果的代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03