当前位置：
首页 >
前端技术
> 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特效—滚动公告