南阳南阳新区网站建设,江阴建设网站,如何查网站外链,开发网站软件这篇主要是总结JavaScript常见简单实用的特效#xff0c;主要从代码量短、简单实用几个方面进行叙述。其中特效包括#xff1a; 1.鼠标悬停图片切换查看器#xff1b; 2.鼠标移动图片放大#xff1b; 3.鼠标移动切换内容#xff1b; 4.贵财下… 这篇主要是总结JavaScript常见简单实用的特效主要从代码量短、简单实用几个方面进行叙述。其中特效包括 1.鼠标悬停图片切换查看器 2.鼠标移动图片放大 3.鼠标移动切换内容 4.贵财下拉菜单案例 5.JS图片放大镜功能-类似淘宝 6.下一页翻页跳转功能。 下载地址 希望文章对你有所帮助尤其是学习前端JavaScript的同学。
一. 鼠标悬停图片切换查看器 代码如下所示通过JavaScript函数showDaTu显示大图重点是在img中调用onmouseover鼠标函数然后通过document.getElementById函数实现换图。
htmlheadtitleJavaScript 图片切换 /title/headbodyscriptfunction showDaTu(src){document.getElementById(defaultImg).srcsrc;}/scriptimg srcwall1.jpg iddefaultImgbrbrbrimg srcwall_s1.jpg οnmοuseοvershowDaTu(wall1.jpg)img srcwall_s2.jpg οnmοuseοvershowDaTu(wall2.jpg)img srcwall_s3.jpg οnmοuseοvershowDaTu(wall3.jpg)img srcwall_s4.jpg οnmοuseοvershowDaTu(wall4.jpg)br因图片较大请等待图片加载完成……然后鼠标放小图上就会切换了。/body
/html 运行结果如下图所示 二. 鼠标移动图片放大 该部分参考http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发并圆滑地以动画效果改变CSS的属性值。 代码如下所示
html head meta charsetUTF-8 title/title style typetext/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 srcfocus.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οutchange2(this);函数的功能是鼠标移开目标区域时响应函数。 3.display. display 属性规定元素应该生成的框的类型。 none 此元素不会被显示。block 此元素将显示为块级元素此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素元素前后没有换行符。 4.用ul时去掉行号并把它放到最左边。 list-style-type: none; html
headmeta charsetUTF-8stylebody{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;}/styletitlesouhu/titlescript languageJavaScript!--function change(val,obj) {obj.style.backgroundColor#FFC12D;if(valzs){zs.style.displayblock;rz.style.displaynone;ky.style.displaynone;}else if(valrz){ky.style.displaynone;zs.style.displaynone;rz.style.displayblock;}else if(valky){ky.style.displayblock;zs.style.displaynone;rz.style.displaynone;}}function change2(val) {val.style.backgroundColorsilver;}//--/script
/head
bodydiv classdiv1
div classnaviulli οnmοuseοverchange(zs,this) οnmοuseοutchange2(this)招生/lili οnmοuseοverchange(rz,this) οnmοuseοutchange2(this)热招/lili οnmοuseοverchange(ky,this) οnmοuseοutchange2(this)考研/li/ul
/divdiv idzs classzsullia href#招生招生招生招生/a/lilia href#招生招生招生招生/a/lilia href#招生招生招生招生/a/lilia href#招生招生招生招生/a/lilia href#招生招生招生招生/a/lilia href#招生招生招生招生/a/li/ul/divdiv idrz classrz ullia href#热招热招热招热招/a/lilia href#热招热招热招热招/a/lilia href#热招热招热招热招/a/lilia href#热招热招热招热招/a/lilia href#热招热招热招热招/a/lilia href#热招热招热招热招/a/li/ul/divdiv idky classky ullia href#考研考研考研考研/a/lilia href#考研考研考研考研/a/lilia href#考研考研考研考研/a/lilia href#考研考研考研考研/a/lilia href#考研考研考研考研/a/lilia href#考研考研考研考研/a/li/ul/divdiv/divdiv/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 xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-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
/headbody
div idlayout
div idtopimg idlogo srcgufe_logo.pngul idsecondlia href#领导信箱/a/lilia href#信息公开/a/lilia href#数字贵财/a/lilia href#邮箱/a/lilia href#English/a/li/ulul idthirdlia href#学生/a/lilia href#教职工/a/lilia href#校友/a/lilia href#考生/访客/a/li/ul
/divdiv idmenuul idfirstli idtit1a href#贵财概况/adiv idoneimg srcgaikuo_img.jpg/ul lia href#学校简介/a/lilia href#贵财标识/a/lilia href#现任领导/a/lilia href#发展战略/a/lilia href#领导关怀/a/lilia href#校友风采/a/lilia href#大事记/a/lilia href#历史沿革/a/lilia href#校园风光/a/li/ul/div/lili idtit2a href#组织机构/adiv idtwoimg srczuzhi_img.jpg/ul lia href#党群部门/a/lilia href#行政部门/a/lilia href#院系设置/a/lilia href#科研机构/a/lilia href#教辅部门/a/li/ul/div/lili idtit3a href#招生就业/adiv idthreeimg srczhaosheng_img.jpg /ul lia href#本专科招生/a/lilia href#研究生招生/a/lilia href#本专科就业/a/lilia href#研究生就业/a/li/ul/div/li li idtit4a href#教育教学/adiv idfourimg srcjiaoyu_img.jpgul lia href#师资队伍/a/lilia href#本科生教育/a/lilia href#研究生教育/a/lilia href#继续教育/a/lilia href#留学生教育国际合作培养/a/li/ul/div/lili idtit5a href#科学研究/adiv idfiveimg srckexue_img.jpg/ul lia href#学科建设/a/lilia href#科研项目/a/lilia href#科研机构/a/lilia href#学术刊物/a/li/ul/div/lili idtit6a href#合作交流/adiv idsiximg srchezuo_img.jpg/ul lia href#中外合作办学/a/lilia href#孔子学院/a/lilia href#学术交流/a/lilia href#国际交流/a/li/ul/div/lili idtit7a href#校园服务/adiv idsevenimg srcfuwu_img.jpg/ul lia href#校园文化/a/lilia href#校园导览/a/lilia href#生活指南/a/lilia href#校园媒体/a/lilia href#道德讲堂/a/lilia href#心理健康教育/a/lilia href#助学服务/a/lilia href#校历/a/lilia href#问卷调查/a/li/ul/div/li/ul forminput idsearch typetext namesearch value请输入搜索内容... size20px; //forminput idsearch_imgtypeimage srcsearch_button.png/
/div/div
img idbg srcbga2.jpg
pBy 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 xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title放大镜/title
style typetext/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 typetext/javascript
function getByClass(oParent, sClass)
{var aEleoParent.getElementsByTagName(*);var aTmp[];var i0;for(i0;iaEle.length;i){if(aEle[i].classNamesClass){aTmp.push(aEle[i]);}}return aTmp;
}window.οnlοadfunction ()
{var oDivdocument.getElementById(div1);var oMarkgetByClass(oDiv, mark)[0];var oFloatgetByClass(oDiv, float_layer)[0];var oBiggetByClass(oDiv, big_pic)[0];var oSmallgetByClass(oDiv, small_pic)[0];var oImgoBig.getElementsByTagName(img)[0];oMark.οnmοuseοverfunction (){oFloat.style.displayblock;oBig.style.displayblock;};oMark.οnmοuseοutfunction (){oFloat.style.displaynone;oBig.style.displaynone;};oMark.οnmοusemοvefunction (ev){var oEventev||event;var loEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;var toEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;if(l0){l0;}else if(loMark.offsetWidth-oFloat.offsetWidth){loMark.offsetWidth-oFloat.offsetWidth;}if(t0){t0;}else if(toMark.offsetHeight-oFloat.offsetHeight){toMark.offsetHeight-oFloat.offsetHeight;}oFloat.style.leftlpx;oFloat.style.toptpx;var percentXl/(oMark.offsetWidth-oFloat.offsetWidth);var percentYt/(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 iddiv1
div classsmall_pic
span classmark/spanspan classfloat_layer/spanimg srcwall_s6.jpg //divdiv classbig_picimg srcwall6.jpg //div
/div
/body
/html 运行结果如下图所示代码较难。 六. 实现下一页翻页功能 代码如下所示该段代码实现点击下一页翻页功能。 !doctype html
html
head
meta charsetutf-8
title无标题文档/title
style typetext/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 typetext/javascript srcjs/jquery-1.4.4.min.js/script
script typetext/javascript
$(function(){$(#selectAll).click(function(){$(input[typecheckbox]).attr(checked, $(this).attr(checked));});
});
/script
!--批量删除--
script languagejavascript
function deleteAll(obj){ var checked document.getElementsByName(obj); for(var i 0; i checked.length; i ){ if(checked[i].checked){ var trchecked[i].parentNode.parentNode; var tbodytr.parentNode; tbody.removeChild(tr); i--; } }
}
/script
script typetext/javascriptfunction 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)){ totalPageparseInt(num/pageSize)1; }else{ totalPageparseInt(num/pageSize); } var currentPage pno;//当前页数var startRow (currentPage - 1) * pageSize1;//开始显示的行 31 var endRow currentPage * pageSize;//结束显示的行 40endRow (endRow num)? num : endRow; 40console.log(endRow);//遍历显示数据实现分页for(var i1;i(num1);i){ var irow itable.rows[i-1];if(istartRow iendRow){irow.style.display block; }else{irow.style.display none;}}var pageEnd document.getElementById(pageEnd);var tempStr 共num条记录 分totalPage页 当前第currentPage页;if(currentPage1){tempStr a href\#\ onClick\goPage((1),psize)\首页/a;tempStr a href\#\ onClick\goPage((currentPage-1),psize)\上一页/a}else{tempStr 首页;tempStr 上一页; }if(currentPagetotalPage){tempStr a href\#\ onClick\goPage((currentPage1),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
/headbody onload goPage(1,5);
div idowndiv idtopinput classsb typesubmit id value删除 namedelete_button οnclickdeleteAll(range); //divdiv idbuttomspan我的消息/spandivhr color#00CCFF width1030px//divtable cellPadding0 cellSpacing0 styletext-align:center ididDatatbodytr styleheight:35px;td width45pxinput typecheckbox value namerange idselectAll//tdtd width120px反馈人/tdtd width680px反馈内容/tdtd width150px反馈时间/tdtd width50px操作/td/trtr styleheight:32px;td width45pxinput typecheckbox value namerange//tdtd width120px沈敏/tdtd width680pxa hrefxxxiangxi.html targetmenuFrame οnclickiframe.locationxxxiangxi.html你好呀/a/tdtd width150px2016/11/13/tdtd width50pxa hrefxxxiangxi.html targetmenuFrame οnclickiframe.locationxxxiangxi.htmlinput classsb typesubmit value未读 idbtn1 οnclicktd()//a/td/trtr styleheight:32px;td width45pxinput typecheckbox value namerange//tdtd width120px沈敏/tdtd width680pxa hrefnote.html targetmenuFrame οnclickiframe.locationnote.html你好呀/a/tdtd width150px2016/11/13/tdtd width50pxa hrefnote.html target_blankinput classsb typesubmit idbtn2 οnclicktd1() value未读 //a/td/trtr styleheight:32px;td width45pxinput typecheckbox value namerange//tdtd width120px沈敏/tdtd width680pxa hrefnote.html targetmenuFrame οnclickiframe.locationnote.html你好呀/a/tdtd width150px2016/11/13/tdtd width50pxa hrefnote.html target_blankinput classsb typesubmit idbtn2 οnclicktd1() value未读 //a/td/trtr styleheight:32px;td width45pxinput typecheckbox value namerange//tdtd width120px沈敏/tdtd width680pxa hrefnote.html targetmenuFrame οnclickiframe.locationnote.html你好呀/a/tdtd width150px2016/11/13/tdtd width50pxa hrefnote.html target_blankinput classsb typesubmit idbtn2 οnclicktd1() value未读 //a/td/trtr styleheight:32px;td width45pxinput typecheckbox value namerange//tdtd width120px沈敏/tdtd width680pxa hrefnote.html targetmenuFrame οnclickiframe.locationnote.html你好呀/a/tdtd width150px2016/11/13/tdtd width50pxa hrefnote.html target_blankinput classsb typesubmit idbtn2 οnclicktd1() value未读 //a/td/trtr styleheight:32px;td width45pxinput typecheckbox value namerange//tdtd width120px沈敏/tdtd width680pxa hrefnote.html targetmenuFrame οnclickiframe.locationnote.html你好呀/a/tdtd width150px2016/11/13/tdtd width50pxa hrefnote.html target_blankinput classsb typesubmit idbtn2 οnclicktd1() value未读 //a/td/tr/tbody/tabletable width100% alignrighttrtd stylepadding-left:640px;div idbarcon namebarcon/div/td/tr/table /div/div
/body
/html运行结果如下所示 最后希望这篇文章对你有所帮助尤其是我的学生和JS学习者。 最近非常开心感谢娜娜晚安~ (By:Eastmount 2016-12-19 凌晨1点 http://blog.csdn.net/eastmount/ )
