JavaScript和jQuery制作光棒效果
更新時(shí)間：2017年02月24日 09:36:22 作者："半城繁華半城傷"
本文主要介紹了使用javaScript和jQuery制作光棒效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
使用javaScript與jQuery添加CSS樣式的區(qū)別和步驟
使用javaScript制作光棒效果
--首先是javaScript
<script>
$(function () {
var lis = document.getElementsByTagName("li"); //定義DOM變量接受標(biāo)簽為li的元素
for (var i = 0; i < lis.length;i++){
lis[i].onmouseover = function () {
//方式一
//this.style.backGround = "pink"; //1，注意這里只能使用this方法作為for循環(huán)當(dāng)前遍歷項(xiàng)
//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>
兩種方式相比相對(duì)來(lái)說(shuō)：.cssText比較簡(jiǎn)便
使用jQuery制作光棒效果
<script>
$(function () {
$("li").hover(function () { //這里調(diào)用復(fù)合事件 模擬鼠標(biāo)懸停事件
$(this).css({"background-color": "red","font-size":"50px"});
},
function () {
$(this).css({ "background-color": "", "font-size": "20px" }); //直接追加CSS樣式
}
);
});
</script>
相對(duì)于javaScript jQuer代碼更靈活，簡(jiǎn)便一些，（jQuery中有自動(dòng)遍歷效果，所有省了循環(huán)）
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
要返回上一頁(yè)再刷新頁(yè)面我們用到最多的是在像php,asp,jsp,asp.net中，下面我來(lái)給大家先介紹js 返回前一頁(yè)并刷新頁(yè)面，然后再把這些代碼放在php中實(shí)現(xiàn)刪除后返回當(dāng)前頁(yè)面并刷新頁(yè)面2020-09-09
項(xiàng)目需要做了如下的東西，希望能給其他需要的同學(xué)們一點(diǎn)參考。2010-08-08
JS實(shí)現(xiàn)為動(dòng)態(tài)添加的元素增加事件功能示例【基于事件委托】
這篇文章主要介紹了JS實(shí)現(xiàn)為動(dòng)態(tài)添加的元素增加事件功能,結(jié)合實(shí)例形式分析了javascript基于事件委托實(shí)現(xiàn)針對(duì)動(dòng)態(tài)添加的元素增加事件的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
JavaScript對(duì)象與數(shù)組的幾種常見(jiàn)復(fù)制方法
在 JavaScript 開(kāi)發(fā)中,對(duì)象和數(shù)組的復(fù)制是一個(gè)非常常見(jiàn)的操作,無(wú)論是函數(shù)參數(shù)傳遞、狀態(tài)管理,還是避免不必要的副作用,了解和掌握各種復(fù)制方式至關(guān)重要,我們將系統(tǒng)梳理 JavaScript 中的幾種常見(jiàn)復(fù)制方法,并對(duì)其應(yīng)用場(chǎng)景進(jìn)行詳細(xì)說(shuō)明,需要的朋友可以參考下2024-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript的介紹和簡(jiǎn)單語(yǔ)法(示例代碼)
JavaScript是一種廣泛使用的腳本語(yǔ)言,為網(wǎng)頁(yè)添加交互性和動(dòng)態(tài)功能提供了強(qiáng)大的支持,在本文中,我們將深入了解JavaScript的基本概念和用法,包括它在HTML中的書(shū)寫(xiě)位置、注釋和結(jié)束符的使用,以及一種常用的函數(shù)——alert語(yǔ)句,感興趣的朋友一起看看吧2023-09-09
JS操作時(shí)間 - UNIX時(shí)間戳的簡(jiǎn)單介紹(必看篇)
下面小編就為大家?guī)?lái)一篇JS操作時(shí)間 - UNIX時(shí)間戳的簡(jiǎn)單介紹(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
微信小程序控制臺(tái)提示warning:Now you can provide attr "wx:key" for a "w
這篇文章主要介紹了微信小程序控制臺(tái)提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解決方法,簡(jiǎn)單分析了wx:for警告提示相關(guān)解決方法,需要的朋友可以參考下2019-02-02
JS實(shí)現(xiàn)可點(diǎn)擊展開(kāi)與關(guān)閉的左側(cè)廣告代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可點(diǎn)擊展開(kāi)與關(guān)閉的左側(cè)廣告代碼,通過(guò)鼠標(biāo)onClick事件調(diào)用自定義javascript函數(shù)實(shí)現(xiàn)頁(yè)面元素及樣式的顯示與隱藏效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了js編寫(xiě)輪播圖效果的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03