JavaScript和jQuery制作光棒效果
更新時(shí)間：2017年02月24日 09:36:22 作者："半城繁華半城傷"
本文主要介紹了使用javaScript和jQuery制作光棒效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
使用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ì)來說：.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í)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
前面文章里寫過一個(gè)彈出層對(duì)話框，但ie6下有bug，根本沒有實(shí)現(xiàn)position:fixed的效果，當(dāng)時(shí)沒有真實(shí)ie6環(huán)境，測(cè)試疏忽，匆匆放到博客上，還讓一些讀者看到甚至使用，在這里表示萬分抱歉啊2011-05-05
用JS寫的一個(gè)Ajax庫(kù)(實(shí)例代碼)
下面小編就為大家?guī)硪黄肑S寫的一個(gè)Ajax庫(kù)(實(shí)例代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
在項(xiàng)目中需要分析將一個(gè)有規(guī)則的字符串分割成一個(gè)字符串?dāng)?shù)組。2009-09-09
Bootstrap入門書籍之（零）Bootstrap簡(jiǎn)介
Bootstrap是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文給大家介紹Bootstrap入門書籍之（零）Bootstrap簡(jiǎn)介，需要的朋友參考下2016-02-02
reveal.js是一款開源的HTML演示框架,由Hakim El Hattab開發(fā),遵循MIT許可證,它支持嵌套幻燈片、Markdown、自動(dòng)動(dòng)畫、PDF導(dǎo)出等多種功能,本文就來介紹一下如何使用,感興趣的可以了解一下2024-09-09
菜鳥也能搞懂js中typeof與instanceof區(qū)別
instanceof和typeof是兩個(gè)運(yùn)算符，在程序設(shè)計(jì)中用到，常用來判斷一個(gè)變量是否為空，或者是什么類型的，本文就來介紹一下typeof與instanceof區(qū)別，感興趣的可以了解一下2021-09-09
今天小編就為大家分享一篇layer父頁獲取彈出層輸入框里面的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
教你如何使用THREEJS實(shí)現(xiàn)一個(gè)可調(diào)節(jié)檔位、可搖頭的電風(fēng)扇
夏天到了，用Three.js實(shí)現(xiàn)一個(gè)可以搖頭和調(diào)節(jié)檔位的電風(fēng)扇，主要使用到Blender處理3D模型，用Vite+Typescript搭建項(xiàng)目框架，這篇文章主要介紹了使用THREEJS實(shí)現(xiàn)一個(gè)可調(diào)節(jié)檔位、可搖頭的電風(fēng)扇,需要的朋友可以參考下2023-06-06
詳解JavaScript的閉包、IIFE、apply、函數(shù)與對(duì)象
本文主要對(duì)JavaScript的閉包、IIFE、apply、函數(shù)與對(duì)象進(jìn)行詳細(xì)介紹。有很好的參考價(jià)值，需要的朋友一起來看下吧
2016-12-12