當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript的特效
生活随笔
收集整理的這篇文章主要介紹了
JavaScript的特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
例1：當光標移動到數據行上，添加背景色，光標離開后，背景色取消，不含表頭。
基礎代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style> </head> <body><table><tr><td>排名</td><td>球隊</td><td>勝</td><td>負</td></tr><tr><td>1</td><td>熱火</td><td>3</td><td>0</td></tr><tr><td>2</td><td>凱爾特人</td><td>2</td><td>2</td></tr><tr><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//選擇一行，該行添加背景色function selectTr(trObj) {}// 離開一行，取消背景色function unselectTr(trObj) {}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在頁面標簽加載完畢以后再引入JS文件可以優化用戶體驗–>--> </body> </html>困難：如何給tr行設置樣式？具備dom編程能力。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style> </head> <body><table><tr><td>排名</td><td>球隊</td><td>勝</td><td>負</td></tr><tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)"><td>1</td><td>熱火</td><td>3</td><td>0</td></tr><tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)"><td>2</td><td>凱爾特人</td><td>2</td><td>2</td></tr><tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)"><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//選擇一行，該行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 離開一行，取消背景色function unselectTr(trObj) {trObj.className = "";}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在頁面標簽加載完畢以后再引入JS文件可以優化用戶體驗–>--> </body> </html>在標簽中綁定事件，導致代碼重復率高，優化 ：js統一來綁定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style> </head> <body><table><tr><td>排名</td><td>球隊</td><td>勝</td><td>負</td></tr><tr><td>1</td><td>熱火</td><td>3</td><td>0</td></tr><tr><td>2</td><td>凱爾特人</td><td>2</td><td>2</td></tr><tr><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//選擇一行，該行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 離開一行，取消背景色function unselectTr(trObj) {trObj.className = "";}// 統一綁定事件// 獲取所有的tr——>數組// getElementByTagName根據標簽名來獲取標簽對象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//為每一行綁定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在頁面標簽加載完畢以后再引入JS文件可以優化用戶體驗–>--> </body> </html>例2：全選和取消
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style> </head> <body><table><tr><td>全選/取消<input type = "checkbox"/></td><td>排名</td><td>球隊</td><td>勝</td><td>負</td></tr><tr><td><input type = "checkbox"/></td><td>1</td><td>熱火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox"/></td><td>2</td><td>凱爾特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//選擇一行，該行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 離開一行，取消背景色function unselectTr(trObj) {trObj.className = "";}// 統一綁定事件// 獲取所有的tr——>數組// getElementByTagName根據標簽名來獲取標簽對象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//為每一行綁定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在頁面標簽加載完畢以后再引入JS文件可以優化用戶體驗–>--> </body> </html>思路：
（1）實現全選和取消的效果
找到相應的復選框，id標識
結合document.getElementById(“choiceCK”)----》input? type = checkbox對象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style> </head> <body><table><tr><td>全選/取消<input type = "checkbox" id = "choiceCK"/></td><td>排名</td><td>球隊</td><td>勝</td><td>負</td></tr><tr><td><input type = "checkbox"/></td><td>1</td><td>熱火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox"/></td><td>2</td><td>凱爾特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//選擇一行，該行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 離開一行，取消背景色function unselectTr(trObj) {trObj.className = "";}// 統一綁定事件// 獲取所有的tr——>數組// getElementByTagName根據標簽名來獲取標簽對象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//為每一行綁定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}//全選和取消的效果//獲取全選和取消的復選框var choiceCKObj = document.getElementById("choiceCK");//給全選和取消的復選框綁定單擊事件choiceCKObj.onclick = function () { //做事if (choiceCKObj.checked) {//全選console.debug("全選");} else {console.debug("取消");}}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在頁面標簽加載完畢以后再引入JS文件可以優化用戶體驗–>--> </body> </html>獲取第二、三、四行的復選框，把它們分為一組，使用name屬性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style> </head> <body><table><tr><td>全選/取消<input type = "checkbox" id = "choiceCK"/></td><td>排名</td><td>球隊</td><td>勝</td><td>負</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>1</td><td>熱火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>2</td><td>凱爾特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//選擇一行，該行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 離開一行，取消背景色function unselectTr(trObj) {trObj.className = "";}// 統一綁定事件// 獲取所有的tr——>數組// getElementByTagName根據標簽名來獲取標簽對象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//為每一行綁定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}//全選和取消的效果//獲取全選和取消的復選框var choiceCKObj = document.getElementById("choiceCK");//給全選和取消的復選框綁定單擊事件choiceCKObj.onclick = function () {//做事if (choiceCKObj.checked) {//全選console.debug("全選");} else {console.debug("取消");}}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在頁面標簽加載完畢以后再引入JS文件可以優化用戶體驗–>--> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style> </head> <body><table><tr><td>全選/取消<input type = "checkbox" id = "choiceCK"/></td><td>排名</td><td>球隊</td><td>勝</td><td>負</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>1</td><td>熱火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>2</td><td>凱爾特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//選擇一行，該行添加背景色function selectTr(trObj) {// trObj.className = "selected";}// 離開一行，取消背景色function unselectTr(trObj) {// trObj.className = "";}// 統一綁定事件// 獲取所有的tr——>數組// getElementByTagName根據標簽名來獲取標簽對象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//為每一行綁定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}//全選和取消的效果//獲取全選和取消的復選框var choiceCKObj = document.getElementById("choiceCK");// 獲取name為ballId的所有復選框// getElementByName根據標簽中的name屬性獲取元素對象var ballIdObjects = document.getElementsByName("ballId");// console.debug(ballIdObjects.length);//給全選和取消的復選框綁定單擊事件choiceCKObj.onclick = function () {//做事if (choiceCKObj.checked) {//全選// console.debug("全選");for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].checked = true;}} else {// console.debug("取消");for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].checked = false;}}};</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在頁面標簽加載完畢以后再引入JS文件可以優化用戶體驗–>--> </body> </html>（2）操作行數據中的復選框對全選和取消的影響
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style> </head> <body><table><tr><td>全選/取消<input type = "checkbox" id = "choiceCK"/></td><td>排名</td><td>球隊</td><td>勝</td><td>負</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>1</td><td>熱火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>2</td><td>凱爾特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//選擇一行，該行添加背景色function selectTr(trObj) {// trObj.className = "selected";}// 離開一行，取消背景色function unselectTr(trObj) {// trObj.className = "";}// 統一綁定事件// 獲取所有的tr——>數組// getElementByTagName根據標簽名來獲取標簽對象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//為每一行綁定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}//全選和取消的效果//獲取全選和取消的復選框var choiceCKObj = document.getElementById("choiceCK");// 獲取name為ballId的所有復選框// getElementByName根據標簽中的name屬性獲取元素對象var ballIdObjects = document.getElementsByName("ballId");// console.debug(ballIdObjects.length);//給全選和取消的復選框綁定單擊事件choiceCKObj.onclick = function () {//做事if (choiceCKObj.checked) {//全選// console.debug("全選");for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].checked = true;}} else {// console.debug("取消");for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].checked = false;}}};//操作數據行中的復選框對全選和取消的影響for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].onclick = function () {if (this.checked) {var cnt = 0;for (var j = 0 ; j < ballIdObjects.length ; j++) {if (ballIdObjects[j].checked) {cnt++;} } if (cnt == ballIdObjects.length) {choiceCKObj.checked = true;} } else {choiceCKObj.checked = false;}}} </script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在頁面標簽加載完畢以后再引入JS文件可以優化用戶體驗–>--> </body> </html>總結
以上是生活随笔為你收集整理的JavaScript的特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Tools】ZoomIt使用方法
- 下一篇： JavaScript特效—滚动公告