當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

网站设计之常见简单实用的JavaScript特效总结（上篇）

發布時間：2023/12/20 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了网站设计之常见简单实用的JavaScript特效总结（上篇）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? ? ? 這篇主要是總結JavaScript常見簡單實用的特效，主要從代碼量短、簡單實用幾個方面進行敘述。其中特效包括：
? ? ? ? 1.鼠標懸停圖片切換查看器；
? ? ? ? 2.鼠標移動圖片放大；
? ? ? ? 3.鼠標移動切換內容；
? ? ? ? 4.貴財下拉菜單案例；
? ? ? ? 5.JS圖片放大鏡功能-類似淘寶；
? ? ? ? 6.下一頁翻頁跳轉功能。

? ? ? ? 下載地址：
? ? ? ? 希望文章對你有所幫助，尤其是學習前端JavaScript的同學。

一. 鼠標懸停圖片切換查看器

? ? ? ? 代碼如下所示，通過JavaScript函數showDaTu顯示大圖，重點是在<img>中調用onmouseover鼠標函數，然后通過document.getElementById函數實現換圖。

<html><head><title>JavaScript 圖片切換 </title></head><body><script>function showDaTu(src){document.getElementById("defaultImg").src=src;}</script><img src="wall1.jpg" id="defaultImg"><br><br><br><img src='wall_s1.jpg' οnmοuseοver="showDaTu('wall1.jpg')"><img src='wall_s2.jpg' οnmοuseοver="showDaTu('wall2.jpg')"><img src='wall_s3.jpg' οnmοuseοver="showDaTu('wall3.jpg')"><img src='wall_s4.jpg' οnmοuseοver="showDaTu('wall4.jpg')"><br>因圖片較大，請等待圖片加載完成……然后鼠標放小圖上就會切換了。</body> </html> ? ? ? ? 運行結果如下圖所示：

二. 鼠標移動圖片放大

? ? ? ? 該部分參考：http://blog.csdn.net/u014175572/article/details/51535768
? ? ? ??CSS3的transform:scale()可以實現按比例放大或者縮小功能。
? ? ? ? CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。
? ? ? ? 代碼如下所示：

<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } div img{ cursor: pointer; transition: all 0.6s; } div img:hover{ transform: scale(1.4); } </style> </head> <body> <div> <img src="focus.jpg" /> </div> </body> </html> ? ? ? ? 效果如下圖所示，包括縮放前后的對比。

??

? ? ? ? transition: all 0.6s;表示所有的屬性變化在0.6s的時間段內完成。
? ? ? ? transform: scale(1.4);表示在鼠標放到圖片上的時候圖片按比例放大1.4倍。
? ? ? ? PS：這部分代碼參考博主"簡單就是美"，推薦大家可以去學習下，非常不錯。

三. 鼠標移動內容切換

? ? ? ? 這段代碼參考文章：http://blog.csdn.net/hill_kinsham/article/details/52448668
? ? ? ? 重點說一下關鍵功能的幾個函數。
? ? ? ? 1.οnmοuseοver=" change('zs', this) " 函數的功能是鼠標移動到目標區域時，響應函數。這里的'zs'用id與后面要變更的區域綁定。this的功能不太了解，效果是改變當前的值。
? ? ? ? 2.οnmοuseοut="change2(this)";函數的功能是鼠標移開目標區域時，響應函數。
? ? ? ? 3.display. display 屬性規定元素應該生成的框的類型。
? ? ? ??none 此元素不會被顯示。block 此元素將顯示為塊級元素，此元素前后會帶有換行符。inline 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
? ? ? ??4.用<ul>時，去掉行號，并把它放到最左邊。 list-style-type: none;

<html> <head><meta charset="UTF-8"><style>body{font-size: 12px;}.div1{width: 126px;height: 156px;/* background-color: peachpuff;*/}.navi{width: 21px;height: 156px;/* background-color: yellowgreen;*/float: left;}.navi ul{padding: 0px;margin-left: 0px;margin-top: 0px;}.navi ul li{list-style-type: none;width: 21px;height: 43px;margin-top: 4px;text-align: center;padding-top: 5px;background-color: silver;}.zs, .rz,.ky{width: 101px;margin-left: 4px;height: 156px;margin-top: 0px;/*background-color: rosybrown;*/float: left;}.zs ul,.rz ul,.ky ul{padding: 0px;margin-left: 0px;margin-top: 3px;float: left;}.zs ul li,.rz ul li,.ky ul li{list-style-type: none;line-height: 19px;}.rz,.ky{display: none;}</style><title>souhu</title><script language="JavaScript"></script> </head> <body><div class="div1"> <div class="navi"><ul><li οnmοuseοver="change('zs',this)" οnmοuseοut="change2(this)">招生</li><li οnmοuseοver="change('rz',this)" οnmοuseοut="change2(this)">熱招</li><li οnmοuseοver="change('ky',this)" οnmοuseοut="change2(this)">考研</li></ul> </div><div id="zs" class="zs"><ul><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li></ul></div><div id="rz" class="rz" ><ul><li><a href="#">熱招熱招熱招熱招</a></li><li><a href="#">熱招熱招熱招熱招</a></li><li><a href="#">熱招熱招熱招熱招</a></li><li><a href="#">熱招熱招熱招熱招</a></li><li><a href="#">熱招熱招熱招熱招</a></li><li><a href="#">熱招熱招熱招熱招</a></li></ul></div><div id="ky" class="ky" ><ul><li><a href="#">考研考研考研考研</a></li><li><a href="#">考研考研考研考研</a></li><li><a href="#">考研考研考研考研</a></li><li><a href="#">考研考研考研考研</a></li><li><a href="#">考研考研考研考研</a></li><li><a href="#">考研考研考研考研</a></li></ul></div><div></div><div></div> </div> </body> </html> ? ? ? ? 運行結果如下圖所示：
??

四. 貴財下拉菜單案例

? ? ? ? 這是模仿貴州財經大學主頁下拉菜單的一段代碼，非常有用。希望對你有所幫助，感謝我的學生。
? ? ? ? 詳見下載地址：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下菜單實現</title> <style> body{width:100%;padding:0px;margin:0px;} #layout{margin-top:10px;padding:0px;width:1024px;margin-left:auto;margin-right:auto;} #top{width:1024px;;height:59px;} #top #logo{float:left;margin-bottom:0px;} #top #second{float:left;margin-left:160px;margin-top:20px;padding:0px;} #top #second li{font-size: 12px;font-weight: bolder;margin-right: 20px;list-style-type: none;float: left;font-family: "微軟雅黑";} #top #second li a{text-decoration:none;color:gray;} #top #second li a:hover{color:red; } #top #third{float: left;border::gray 1px solid;border: 2px solid #FFF;background-color:gray;margin-left:53px;margin-top:10px;padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:5px;border-radius:8px;} #top #third li{float:left;margin-right:10px;list-style-type:none;font-size:12px;} #top #third li a{color:white;text-decoration:none;} #top #third li a:hover{text-decoration:underline;} #menu{width: 2000px;height: 50px;background-color: #313b4d;padding-top: 0px;padding-left: 460px;padding-bottom: 0px;margin-left: -460px;z-index: 20;} #menu #first{position: relative;width:100%;margin-left:10px;padding:0px; } #menu #first li{float: left;list-style-type: none;font-size: 14px;margin-right: 40px;margin-top: 15px;margin-bottom: 0px;padding-bottom: 15px;font-family: "微軟雅黑";} #tit1:hover#tit1:hover,#tit2:hover,#tit3:hover,#tit4:hover,#tit5:hover,#tit6:hover,#tit7:hover{background-image: url(backgroundimg.png);background-repeat: no-repeat;background-position: center bottom;} #tit1:hover #one,#tit2:hover #two,#tit3:hover #three,#tit4:hover #four,#tit5:hover #five,#tit6:hover #six,#tit7:hover #seven{display:inline;} #tit1 a, #tit2 a, #tit3 a,#tit4 a,#tit5 a,#tit6 a,#tit7 a{color:white;text-decoration:none;font-weight:bolder;padding:0px;margin:0px;} #one,#two,#three,#four,#five,#six,#seven{position: absolute;background-color:white;top: 50px;left:-460px;width: 1920px;padding-top: 25px;padding-left: 0px;padding-bottom: 25px;display: none;margin-right:0px;} #one img,#two img,#three img,#four img,#five img,#six img,#seven img{float:left;margin-right:50px;margin-left:460px; } #one ul,#two ul,#three ul,#four ul,#five ul,#six ul,#seven ul{font-family: "微軟雅黑";margin-top:10px;width:1200px;} #one li a,#two li a,#three li a,#four li a,#five li a,#six li a,#seven li a{color:#313b4d;font-weight:normal;margin-right:5px;} #one li a:hover,#two li a:hover,#three li a:hover,#four li a:hover,#five li a:hover,#six li a:hover,#seven li a:hover{color: #AD0000; } form{float:left;width:200px;border:white solid 2px;border-radius:8px;;padding-left:5px;padding-bottom:5px;margin-top:10px;margin-left:133px;} #search{font-family: Arial, Helvetica, sans-serif;color: gray;font-size: 12px;border: none;padding:0px;margin-left:5px;margin-top: 5px;margin-bottom:3px;background-color: transparent;letter-spacing:1px;} #search_img{margin-top:17px;margin-bottom:3px;margin-left:-30px;} #bg{padding:0px;width:100%;height:520px;background-color:black;margin-top:0px;} p{font-family:"微軟雅黑"font-size: 16px;font-weight: bolder;text-align:center;color: gray;margin-top:50px;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: #333;border-right-color: #333;border-bottom-color: #333;border-left-color: #333;} </style> </head><body> <div id="layout"> <div id="top"><img id="logo" src="gufe_logo.png"><ul id="second"><li><a href="#">領導信箱</a></li><li><a href="#">信息公開</a></li><li><a href="#">數字貴財</a></li><li><a href="#">郵箱</a></li><li><a href="#">English</a></li></ul><ul id="third"><li><a href="#">學生</a></li><li><a href="#">教職工</a></li><li><a href="#">校友</a></li><li><a href="#">考生/訪客</a></li></ul> </div><div id="menu"><ul id="first"><li id="tit1"><a href="#">貴財概況</a><div id="one"><img src="gaikuo_img.jpg"/><ul ><li><a href="#">學校簡介</a></li><li><a href="#">貴財標識</a></li><li><a href="#">現任領導</a></li><li><a href="#">發展戰略</a></li><li><a href="#">領導關懷</a></li><li><a href="#">校友風采</a></li><li><a href="#">大事記</a></li><li><a href="#">歷史沿革</a></li><li><a href="#">校園風光</a></li></ul></div></li><li id="tit2"><a href="#">組織機構</a><div id="two"><img src="zuzhi_img.jpg"/><ul ><li><a href="#">黨群部門</a></li><li><a href="#">行政部門</a></li><li><a href="#">院系設置</a></li><li><a href="#">科研機構</a></li><li><a href="#">教輔部門</a></li></ul></div></li><li id="tit3"><a href="#">招生就業</a><div id="three"><img src="zhaosheng_img.jpg" /><ul ><li><a href="#">本?？普猩?lt;/a></li><li><a href="#">研究生招生</a></li><li><a href="#">本專科就業</a></li><li><a href="#">研究生就業</a></li></ul></div></li> <li id="tit4"><a href="#">教育教學</a><div id="four"><img src="jiaoyu_img.jpg"><ul ><li><a href="#">師資隊伍</a></li><li><a href="#">本科生教育</a></li><li><a href="#">研究生教育</a></li><li><a href="#">繼續教育</a></li><li><a href="#">留學生教育（國際合作培養）</a></li></ul></div></li><li id="tit5"><a href="#">科學研究</a><div id="five"><img src="kexue_img.jpg"/><ul > <li><a href="#">學科建設</a></li><li><a href="#">科研項目</a></li><li><a href="#">科研機構</a></li><li><a href="#">學術刊物</a></li></ul></div></li><li id="tit6"><a href="#">合作交流</a><div id="six"><img src="hezuo_img.jpg"/><ul ><li><a href="#">中外合作辦學</a></li><li><a href="#">孔子學院</a></li><li><a href="#">學術交流</a></li><li><a href="#">國際交流</a></li></ul></div></li><li id="tit7"><a href="#">校園服務</a><div id="seven"><img src="fuwu_img.jpg"/><ul ><li><a href="#">校園文化</a></li><li><a href="#">校園導覽</a></li><li><a href="#">生活指南</a></li><li><a href="#">校園媒體</a></li><li><a href="#">道德講堂</a></li><li><a href="#">心理健康教育</a></li><li><a href="#">助學服務</a></li><li><a href="#">校歷</a></li><li><a href="#">問卷調查</a></li></ul></div></li></ul> <form><input id="search" type="text" name="search" value="請輸入搜索內容..." size="20px;" /></form><input id="search_img"type="image" src="search_button.png"/> </div></div> <img id="bg" src="bga2.jpg" > <p>By Eastmount CSDN</p> </body> </html> ? ? ? ? 運行如下圖所示，鼠標移動到不同位置可以顯示不同下拉菜單，非常實用的例子。

五. JS圖片放大鏡功能-類淘寶

? ? ? ? 代碼如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>放大鏡</title> <style type="text/css"> #div1 { width: 120px; height: 90px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic { width: 120px; height: 90px; background: #eee; position: relative; } #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; } #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } #div1 .big_pic img { position:absolute; top: -30px; left: -80px; } </style> <script type="text/javascript"> function getByClass(oParent, sClass) {var aEle=oParent.getElementsByTagName('*');var aTmp=[];var i=0;for(i=0;i<aEle.length;i++){if(aEle[i].className==sClass){aTmp.push(aEle[i]);}}return aTmp; }window.οnlοad=function () {var oDiv=document.getElementById('div1');var oMark=getByClass(oDiv, 'mark')[0];var oFloat=getByClass(oDiv, 'float_layer')[0];var oBig=getByClass(oDiv, 'big_pic')[0];var oSmall=getByClass(oDiv, 'small_pic')[0];var oImg=oBig.getElementsByTagName('img')[0];oMark.οnmοuseοver=function (){oFloat.style.display='block';oBig.style.display='block';};oMark.οnmοuseοut=function (){oFloat.style.display='none';oBig.style.display='none';};oMark.οnmοusemοve=function (ev){var oEvent=ev||event;var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;if(l<0){l=0;}else if(l>oMark.offsetWidth-oFloat.offsetWidth){l=oMark.offsetWidth-oFloat.offsetWidth;}if(t<0){t=0;}else if(t>oMark.offsetHeight-oFloat.offsetHeight){t=oMark.offsetHeight-oFloat.offsetHeight;}oFloat.style.left=l+'px';oFloat.style.top=t+'px';var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';}; };</script> </head> <body> <div id="div1"> <div class="small_pic"> <span class="mark"></span><span class="float_layer"></span><img src="wall_s6.jpg" /></div><div class="big_pic"><img src="wall6.jpg" /></div> </div> </body> </html>
? ? ? ? 運行結果如下圖所示，代碼較難。

六. 實現下一頁翻頁功能

? ? ? ? 代碼如下所示，該段代碼實現點擊"下一頁"翻頁功能。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style type="text/css"> #top {background-color: #8EC7FF;height: 45px;width: 1030px;float: left;border-top-width: thin;border-right-width: thin;border-bottom-width: thin;border-left-width: thin;border-bottom-style: solid;border-top-color: #FFF;border-right-color: #FFF;border-bottom-color: #FFF;border-left-color: #FFF; } #own {width: 1030px;margin: 0 auto; } h2 {display: inline;float: left;font-size: 18px;font-weight: 400;margin-top: -12px; }#message {height: 30px;width: 1030px;background-color: #CCCCCC;float: left;border-top-width: thin;border-right-width: thin;border-bottom-width: thin;border-left-width: thin;border-bottom-style: solid;border-top-color: #999;border-right-color: #999;border-bottom-color: #999;border-left-color: #999; } #own #message .h1 {width: 150px; } #own #message .h2 {width: 700px; } #top .sb {height: 30px;width: 100px;margin-left: 10px;margin-top: 10px; } #top .sb1 {height: 30px;width: 120px;margin-left: 10px;margin-top: 10px; } #buttom {width: 1030px;float: left;margin-top: 10px; } td{border-bottom:#CCC solid 1px;border-collapse:collapse; } a{text-decoration:none;color:#333; } a:link {color: #333} /* 未訪問的鏈接 */ a:visited {color:#00C;} /* 已訪問的鏈接 */ a:hover {color:#99C;} </style>  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function(){$('#selectAll').click(function(){$('input[type=checkbox]').attr('checked', $(this).attr('checked'));}); }); </script>  <script language="javascript"> function deleteAll(obj){ var checked = document.getElementsByName(obj); for(var i = 0; i < checked.length; i ++){ if(checked[i].checked){ var tr=checked[i].parentNode.parentNode; var tbody=tr.parentNode; tbody.removeChild(tr); i--; } } } </script> <script type="text/javascript">function goPage(pno,psize){var itable = document.getElementById("idData");var num = itable.rows.length;//表格所有行數(所有記錄數)console.log(num);var totalPage = 0;//總頁數var pageSize = psize;//每頁顯示行數//總共分幾頁 if(num/pageSize > parseInt(num/pageSize)){ totalPage=parseInt(num/pageSize)+1; }else{ totalPage=parseInt(num/pageSize); } var currentPage = pno;//當前頁數var startRow = (currentPage - 1) * pageSize+1;//開始顯示的行 31 var endRow = currentPage * pageSize;//結束顯示的行 40endRow = (endRow > num)? num : endRow; 40console.log(endRow);//遍歷顯示數據實現分頁for(var i=1;i<(num+1);i++){ var irow = itable.rows[i-1];if(i>=startRow && i<=endRow){irow.style.display = "block"; }else{irow.style.display = "none";}}var pageEnd = document.getElementById("pageEnd");var tempStr = "共"+num+"條記錄分"+totalPage+"頁當前第"+currentPage+"頁";if(currentPage>1){tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首頁</a>";tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一頁</a>"}else{tempStr += "首頁";tempStr += "<上一頁"; }if(currentPage<totalPage){tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一頁></a>";tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾頁</a>";}else{tempStr += "下一頁>";tempStr += "尾頁"; }document.getElementById("barcon").innerHTML = tempStr;} </script> <script> function td() {document.getElementById("btn1").value="已讀"; } function td1() {document.getElementById("btn2").value="已讀"; }</script> </head><body onload ="goPage(1,5);" > <div id="own"><div id="top"><input class="sb" type="submit" id="" value="刪除" name="delete_button" οnclick="deleteAll('range');" /></div><div id="buttom"><span>我的消息</span><div><hr color="#00CCFF" width="1030px"/></div><table cellPadding=0 cellSpacing=0 style="text-align:center" id="idData"><tbody><tr style="height:35px;"><td width="45px"><input type="checkbox" value="" name="range" id="selectAll"/></td><td width="120px">反饋人</td><td width="680px">反饋內容</td><td width="150px">反饋時間</td><td width="50px">操作</td></tr><tr style="height:32px;"><td width="45px"><input type="checkbox" value="" name="range"/></td><td width="120px">沈敏</td><td width="680px"><a href="xxxiangxi.html" target="menuFrame" οnclick="iframe.location='xxxiangxi.html'">你好呀！！！！！！！！！！！！！！！！！！！！！！！！！！！！</a></td><td width="150px">2016/11/13</td><td width="50px"><a href="xxxiangxi.html" target="menuFrame" οnclick="iframe.location='xxxiangxi.html'"><input class="sb" type="submit" value="未讀" id="btn1" οnclick="td()"/></a></td></tr><tr style="height:32px;"><td width="45px"><input type="checkbox" value="" name="range"/></td><td width="120px">沈敏</td><td width="680px"><a href="note.html" target="menuFrame" οnclick="iframe.location='note.html'">你好呀！！！！！！！！！！！！！！！！！！！！！！！！！！！！</a></td><td width="150px">2016/11/13</td><td width="50px"><a href="note.html" target="_blank"><input class="sb" type="submit" id="btn2" οnclick="td1()" value="未讀" /></a></td></tr><tr style="height:32px;"><td width="45px"><input type="checkbox" value="" name="range"/></td><td width="120px">沈敏</td><td width="680px"><a href="note.html" target="menuFrame" οnclick="iframe.location='note.html'">你好呀！！！！！！！！！！！！！！！！！！！！！！！！！！！！</a></td><td width="150px">2016/11/13</td><td width="50px"><a href="note.html" target="_blank"><input class="sb" type="submit" id="btn2" οnclick="td1()" value="未讀" /></a></td></tr><tr style="height:32px;"><td width="45px"><input type="checkbox" value="" name="range"/></td><td width="120px">沈敏</td><td width="680px"><a href="note.html" target="menuFrame" οnclick="iframe.location='note.html'">你好呀！！！！！！！！！！！！！！！！！！！！！！！！！！！！</a></td><td width="150px">2016/11/13</td><td width="50px"><a href="note.html" target="_blank"><input class="sb" type="submit" id="btn2" οnclick="td1()" value="未讀" /></a></td></tr><tr style="height:32px;"><td width="45px"><input type="checkbox" value="" name="range"/></td><td width="120px">沈敏</td><td width="680px"><a href="note.html" target="menuFrame" οnclick="iframe.location='note.html'">你好呀！！！！！！！！！！！！！！！！！！！！！！！！！！！！</a></td><td width="150px">2016/11/13</td><td width="50px"><a href="note.html" target="_blank"><input class="sb" type="submit" id="btn2" οnclick="td1()" value="未讀" /></a></td></tr><tr style="height:32px;"><td width="45px"><input type="checkbox" value="" name="range"/></td><td width="120px">沈敏</td><td width="680px"><a href="note.html" target="menuFrame" οnclick="iframe.location='note.html'">你好呀！！！！！！！！！！！！！！！！！！！！！！！！！！！！</a></td><td width="150px">2016/11/13</td><td width="50px"><a href="note.html" target="_blank"><input class="sb" type="submit" id="btn2" οnclick="td1()" value="未讀" /></a></td></tr></tbody></table><table width="100%" align="right"><tr><td style="padding-left:640px;"><div id="barcon" name="barcon"></div></td></tr></table> </div></div> </body> </html> ? ? ? ? 運行結果如下所示：

? ? ? ? 最后希望這篇文章對你有所幫助，尤其是我的學生和JS學習者。
? ? ? ? 最近非常開心，感謝娜娜，晚安~

? ? ? ?(By:Eastmount 2016-12-19 凌晨1點??http://blog.csdn.net/eastmount/?)

總結

以上是生活随笔為你收集整理的网站设计之常见简单实用的JavaScript特效总结（上篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： A/BTest 基础
下一篇：海光国产CPU芯片和服务器,海光CPU芯