Web前端-JS效果-导航弹框、背景变色、鼠标移动切换等常见的js效果
2017-02-26 17:10
786 查看
最近在学习JS效果，分享些实战经验。
来图镇楼！
html部分（大综合）：
2.CSS样式（css1.css）：
3.CSS样式（base.css）:
JS代码：
“`
//1.
function changColor(color1){
var c = document.getElementById(“div-color1”);
if(color1.value==”背景变黄”){
c.style.backgroundColor=”yellow”;
}
if(color1.value==”背景变红”){
c.style.backgroundColor=”red”;
}
if(color1.value==”背景变黑”){
c.style.backgroundColor=”black”;
}
if(color1.value==”恢复原样”){
c.style.backgroundColor=”blue”;
}
}
//2.
function Change(obj1){
var d = document.getElementById(“div-color2”);
if(obj1.value==”背景变窄”){
d.style.width=”80px”;
}if(obj1.value==”背景变黄”){
d.style.backgroundColor=”yellow”;
}if(obj1.value==”背景变高”){
d.style.height=”200px”;
}if(obj1.value==”恢复原样”){
d.style.height=”150px”
d.style.width=”150px”;
d.style.backgroundColor=”blue”;
}
}
//3.
function changname(){
var o = document.getElementById(“name”);
if(o.value==”玩蛋去吧！”){
o.value=”你拍一 我拍一”;
}else{
o.value=”玩蛋去吧！”
}
}
function addtitle(){
var o = document.getElementById(“name1”);
o.setAttribute(“title”,”项目信息”);
// o.title=”标题在此！”;
}
//1.while循环
function xunhuan(){
var i=1;
while(i<=5){
alert(“提示框第”+i+”次！”);
i++;
}
}
//2.for循环
function yangshi(){
for(var i=1;i<=4;i++){
}
//1.求和
function qiuhe(){
var n1 = document.getElementById(“txt1”).value;
var n2 = document.getElementById(“txt2”).value;
var n3 = n1+”“+n2;
alert(n3);
}
//2.数字相加
function qiuhe1(){
var n3 = parseInt(document.getElementById(“txt3”).value);
var n4 = parseInt(document.getElementById(“txt4”).value);
var n5 = n3+n4;
alert(n5);
}
//3.判断
function jc(){
var n = document.getElementById(“num”).value;
if(!isNaN(n)){
alert(“是数字类型,true!”);
}else{
alert(“不是数字类型,false!”);
}
}
//4.求和
//2.数字相加
function qiuhe2(){//获取到的默认都是字符串类型的
var n5 = parseInt(document.getElementById(“txt5”).value);
var n6 = parseInt(document.getElementById(“txt6”).value);
if(isNaN(n5)||isNaN(n6)){
alert(“请输入数字类型的，谢谢！”);
}else{
var n7 = n5+n6;
alert(n7);
}
}
function wenhou(){
var name = document.getElementById(“xingming”).value;
var sex = document.getElementById(“xuanze”).value;
if(sex==”女”){
alert(name+”女士，您好！”);
}else if(sex==”男”){
alert(name+”先生，您好！”);
}
}
function danshuang(){
var d = document.getElementById(“ds”).value;
if(d%2!=0){
alert(“此为单数！”);
}else if(d==0){
alert(“此数为0！”);
}else
alert(“此为双数！”);
}
var now=1;
/日历/
function rili(now){
var obj = document.getElementsByTagName(“li”);
var taglength = obj.length;
for(var i=1;i<=taglength;i++){
if(i==now){
var o = document.getElementById(“yue”+now);
var H = document.getElementById(“H”+now);
H.style.color=”#E84A7E”;
o.style.display=”block”;
}else{
var o = document.getElementById(“yue”+i);
var H = document.getElementById(“H”+i);
H.style.color=”white”;
o.style.display=”none”;
}
}
}
/数组提取/
var n=1;
function tiqu(n){
var ar = new Array(“这是第一句”,”这是第二句”,”这是第三句”,”这是第四句”);
var xs = document.getElementById(“div-xs”);
for(var i=1;i<=ar.length;i++){
if(i==n){
xs.innerHTML = ar[i-1];
}
}
if(n==5){
xs.innerHTML = ar[0]+”,”+ar[1]+”,”+ar[2]+”,”+ar[3]
}
}
/9.qiehua/
function show_lm(n1){
var ob1 = document.getElementsByTagName(“li”);
for(var i=1;i<=ob1.length;i++){
if(i==n1){
var obj = document.getElementById(“tag”+n1);
obj.style.display=”block”;
}else{
var obj = document.getElementById(“tag”+i);
obj.style.display=”none”;
}
}
}
function show_lm1(n1){
var ob1 = document.getElementsByTagName(“li”);
for(var i=1;i<=ob1.length;i++){
if(i==n1){
var obj = document.getElementById(“tagg”+n1);
obj.style.display=”block”;
}else{
var obj = document.getElementById(“tagg”+i);
obj.style.display=”none”;
}
}
}
function tijiaohou(){
var t1 = document.getElementById(“div_text”).value;
var d2 = document.getElementById(“d2”);
d2.innerHTML = ‘提交后在这里显示：’+t1;
}
function tijiaohou1(){
var t2 = document.getElementById(“div_text1”).value;
var t3 = document.getElementById(“div_text2”).value;
var d3 = document.getElementById(“d3”);
d3.innerHTML = ‘提交后在这里显示：’+t2+t3;
}“`
来图镇楼！
html部分（大综合）：
<body> <!--1.传递一个参数--> <div id="div-color1"></div> <input type="button" value="背景变黄" onclick="changColor(this)" /> <input type="button" value="背景变红" onclick="changColor(this)"/> <input type="button" value="背景变黑" onclick="changColor(this)"/> <input type="button" value="恢复原样" onclick="changColor(this)"/> <div id="div-color2"></div> <input type="button" value="背景变窄" onclick="Change(this)"/> <input type="button" value="背景变黄" onclick="Change(this)"/> <input type="button" value="背景变高" onclick="Change(this)"/> <input type="button" value="恢复原样" onclick="Change(this)"/> <br /><br /> <input type="text" value="你拍一 我拍一" id="name"/> <input type="button" value="改变文字" onclick="changname()"/> <input type="button" value="添加title属性(鼠标经过)" id="name1" onmouseover="addtitle()"/> <br /><br /> <!--1.while循环--> <input type="button" value="循环出现提示框5次" onclick="xunhuan()"/> <br /><br /> <!--2.for循环--> <input type="button" value="批量修改样式" onclick="yangshi()"/> <div id="div-max"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div> <br /><br /> <!--1.求和--> <p>1.字符串相加</p> <input type="text" id="txt1" />+<input type="text" id="txt2" /><input type="button" value="求和" onclick="qiuhe()" /> <br /><br /> <!--2.--> <p>2.字符串相加</p> <input type="text" id="txt3" />+<input type="text" id="txt4" /><input type="button" value="求和" onclick="qiuhe1()" /> <br /><br /> <!--3.--> <p>3.判断是否NaN</p> <input type="text" id="num" /><input type="button" value="检测" onclick="jc()" /> <br /><br /> <!--4.--> <p>4.相加3</p> <input type="text" id="txt5" placeholder="支持整数运算"/>+<input type="text" id="txt6" placeholder="支持整数运算"/><input type="button" value="求和" onclick="qiuhe2()" /> <br /><br /> <!--5.问候分析--> <p>5.问候</p> <input type="text" id="xingming" placeholder="姓名"/> <select id="xuanze"> <option>性别</option> <option value="男" >男</option> <option value="女" >女</option> </select> <input type="button" value="问候" onclick="wenhou()" /> <br /><br /> <!--6.三目运算符--> <p>6.单双数</p> <input type="text" placeholder="数字" id="ds" /><input type="button" value="判断单双" onclick="danshuang()" /> <!--7.JS日历--> <p>7.日历</p> <ul id="u1"> <li onmousemove="rili(1)" onmouseout="xiaoxi(1)"><h2 id="H1">1<p>JAN</p></h2></li> <li onmousemove="rili(2)" onmouseout="xiaoxi(2)"><h2 id="H2">2<p>FER</p></h2></li> <li onmousemove="rili(3)" onmouseout="xiaoxi(3)"><h2 id="H3">3<p>MAR</p></h2></li> <li onmousemove="rili(4)" onmouseout="xiaoxi(4)"><h2 id="H4">4<p>APR</p></h2></li> <li onmousemove="rili(5)" onmouseout="xiaoxi(5)"><h2 id="H5">5<p>MAY</p></h2></li> <li onmousemove="rili(6)" onmouseout="xiaoxi(6)"><h2 id="H6">6<p>JUN</p></h2></li> <li onmousemove="rili(7)" onmouseout="xiaoxi(7)"><h2 id="H7">7<p>JUL</p></h2></li> <li onmousemove="rili(8)" onmouseout="xiaoxi(8)"><h2 id="H8">8<p>AUG</p></h2></li> <li onmousemove="rili(9)" onmouseout="xiaoxi(9)"><h2 id="H9">9<p>SEP</p></h2></li> <li onmousemove="rili(10)" onmouseout="xiaoxi(10)"><h2 id="H10">10<p>OCT</p></h2></li> <li onmousemove="rili(11)" onmouseout="xiaoxi(11)"><h2 id="H11">11<p>NOV</p></h2></li> <li onmousemove="rili(12)" onmouseout="xiaoxi(12)"><h2 id="H12">12<p>DEC</p></h2></li> <div id="foot12"> <div id="yue1" style="display: none;"><h3>1月活动</h3><p>这是一月活动内容</p></div> <div id="yue2" style="display: none;"><h3>2月活动</h3><p>这是二月活动内容</p></div> <div id="yue3" style="display: none;"><h3>3月活动</h3><p>这是三月活动内容</p></div> <div id="yue4" style="display: none;"><h3>4月活动</h3><p>这是四月活动内容</p></div> <div id="yue5" style="display: none;"><h3>5月活动</h3><p>这是五月活动内容</p></div> <div id="yue6" style="display: none;"><h3>6月活动</h3><p>这是六月活动内容</p></div> <div id="yue7" style="display: none;"><h3>7月活动</h3><p>这是七月活动内容</p></div> <div id="yue8" style="display: none;"><h3>8月活动</h3><p>这是八月活动内容</p></div> <div id="yue9" style="display: none;"><h3>9月活动</h3><p>这是九月活动内容</p></div> <div id="yue10" style="display: none;"><h3>10月活动</h3><p>这是十月活动内容</p></div> <div id="yue11" style="display: none;"><h3>11月活动</h3><p>这是十一月活动内容</p></div> <div id="yue12" style="display: none;"><h3>12月活动</h3><p>这是十二月活动内容</p></div> </div> </ul> <br /><br /><br /> <!--8.数组输出练习--> <p>8.数组输出练习</p> <div id="div-sz"> <p>已知数组内容：1.这是第一句，2.这是第二句，3.这个第三句，4.这是第四句</p> <input type="button" value="提取1" onclick="tiqu(1)" /> <input type="button" value="提取2" onclick="tiqu(2)" /> <input type="button" value="提取3" onclick="tiqu(3)" /> <input type="button" value="提取4" onclick="tiqu(4)" /> <input type="button" value="全部弹出提取" onclick="tiqu(5)" /> </div> <div id="div-xs"> 显示： </div> <br /><br /> <!--9.鼠标经过变换--> <p>9.鼠标经过变换</p> <ul id="u2"> <li class="u2" onmouseover="show_lm(1)" >栏目一</li> <li class="u2" onmouseover="show_lm(2)" >栏目二</li> <li class="u2" onmouseover="show_lm(3)" >栏目三</li> <li class="u2" onmouseover="show_lm(4)" >栏目四</li> </ul> <div id="div_lm"> <div id="tag1" class="tag" style="display: none">栏目一的内容 栏目一的内容 栏目一的内容 栏目一的内容</div> <div id="tag2" class="tag" style="display: none">栏目二的内容 栏目二的内容 栏目二的内容 栏目二的内容</div> <div id="tag3" class="tag" style="display: none">栏目三的内容 栏目三的内容 栏目三的内容 栏目三的内容</div> <div id="tag4" class="tag" style="display: none">栏目四的内容 栏目四的内容 栏目四的内容 栏目四的内容</div> </div> <br /><br /> <!--10.鼠标点击经过变换--> <p>9.鼠标点击变换</p> <ul id="u2"> <li class="u3" onclick="show_lm1(1)" >栏目一</li> <li class="u3" onclick="show_lm1(2)" >栏目二</li> <li class="u3" onclick="show_lm1(3)" >栏目三</li> <li class="u3" onclick="show_lm1(4)" >栏目四</li> </ul> <div id="div_lm"> <div id="tagg1" class="tag" style="display: none">栏目一的内容 栏目一的内容 栏目一的内容 栏目一的内容</div> <div id="tagg2" class="tag" style="display: none">栏目二的内容 栏目二的内容 栏目二的内容 栏目二的内容</div> <div id="tagg3" class="tag" style="display: none">栏目三的内容 栏目三的内容 栏目三的内容 栏目三的内容</div> <div id="tagg4" class="tag" style="display: none">栏目四的内容 栏目四的内容 栏目四的内容 栏目四的内容</div> </div> <!--11.innerHTML的基本使用--> <p>11.innerHTML的基本使用</p> <input type="text" id="div_text" placeholder="在这里输入文字"/><input type="button" onclick="tijiaohou()" value="提交"/> <div id="d2"> 提交后在这里显示： </div> <br /><br /> <!--12.innerHTML,字符串，判断的基本使用--> <p>12.innerHTML,字符串，判断的基本使用</p> <input type="text" id="div_text1" placeholder="在这里输入文字"/>+<input type="text" id="div_text2" placeholder="在这里输入文字"/><input type="button" onclick="tijiaohou1()" value="提交"/> <div id="d3"> 提交后在这里显示： </div> <br /><br /> </body>
2.CSS样式（css1.css）：
#div-color1{
width: 150px;
height: 150px;
margin-bottom: 30px;
background-color: blue;
}
#div-color2{
width: 150px;
height: 150px;
margin-bottom: 30px;
background-color: blue;
}
#div{
width: 230px;
height: 60px;
}
#div1{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div2{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div3{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div4{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div5{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#u1{
width: 246px;
height: 375px;
background-color:#EAE9E9;
border: 1px gray solid;
}
ul li {
text-align: center;
float: left;
width: 59px;
height:54px;
color: white;
font-size: 12px;
margin-top: 10px;
margin-left: 15px;
background-color: black;
}
#foot12{
float: left;
width: 206px;
height: 67px;
margin: 0 auto;
margin-top: 15px;
margin-left: 15px;
border: 1px white solid;
background-color: #F1F1F1;
}
.u2{
float: left;
width: 53px;
height:30px;
text-align: center;
background-color: #5BC0DE;
}
.u3{
float: left;
width: 53px;
height:30px;
text-align: center;
background-color: #5CB85C;
}
#div_lm{
margin-top: 40px;
width: 300px;
height:100px;
background-color:#D9EDF7 ;
}
.tag{
width: 100px;
}3.CSS样式（base.css）:
html,body,head,ul,li,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,img{
margin: 0;
padding: 0;
}
form,input,select,textarea{margin: 0;padding: 0;}
img{vertical-align: middle;}
li{list-style: none;}
a{text-decoration: none;}
.clear{clear: both;font-size: 0px;}
.left{float: left;}
.right{float: right;}JS代码：
“`
//1.
function changColor(color1){
var c = document.getElementById(“div-color1”);
if(color1.value==”背景变黄”){
c.style.backgroundColor=”yellow”;
}
if(color1.value==”背景变红”){
c.style.backgroundColor=”red”;
}
if(color1.value==”背景变黑”){
c.style.backgroundColor=”black”;
}
if(color1.value==”恢复原样”){
c.style.backgroundColor=”blue”;
}
}
//2.
function Change(obj1){
var d = document.getElementById(“div-color2”);
if(obj1.value==”背景变窄”){
d.style.width=”80px”;
}if(obj1.value==”背景变黄”){
d.style.backgroundColor=”yellow”;
}if(obj1.value==”背景变高”){
d.style.height=”200px”;
}if(obj1.value==”恢复原样”){
d.style.height=”150px”
d.style.width=”150px”;
d.style.backgroundColor=”blue”;
}
}
//3.
function changname(){
var o = document.getElementById(“name”);
if(o.value==”玩蛋去吧！”){
o.value=”你拍一 我拍一”;
}else{
o.value=”玩蛋去吧！”
}
}
function addtitle(){
var o = document.getElementById(“name1”);
o.setAttribute(“title”,”项目信息”);
// o.title=”标题在此！”;
}
//1.while循环
function xunhuan(){
var i=1;
while(i<=5){
alert(“提示框第”+i+”次！”);
i++;
}
}
//2.for循环
function yangshi(){
for(var i=1;i<=4;i++){
}
}
//1.求和
function qiuhe(){
var n1 = document.getElementById(“txt1”).value;
var n2 = document.getElementById(“txt2”).value;
var n3 = n1+”“+n2;
alert(n3);
}
//2.数字相加
function qiuhe1(){
var n3 = parseInt(document.getElementById(“txt3”).value);
var n4 = parseInt(document.getElementById(“txt4”).value);
var n5 = n3+n4;
alert(n5);
}
//3.判断
function jc(){
var n = document.getElementById(“num”).value;
if(!isNaN(n)){
alert(“是数字类型,true!”);
}else{
alert(“不是数字类型,false!”);
}
}
//4.求和
//2.数字相加
function qiuhe2(){//获取到的默认都是字符串类型的
var n5 = parseInt(document.getElementById(“txt5”).value);
var n6 = parseInt(document.getElementById(“txt6”).value);
if(isNaN(n5)||isNaN(n6)){
alert(“请输入数字类型的，谢谢！”);
}else{
var n7 = n5+n6;
alert(n7);
}
}
function wenhou(){
var name = document.getElementById(“xingming”).value;
var sex = document.getElementById(“xuanze”).value;
if(sex==”女”){
alert(name+”女士，您好！”);
}else if(sex==”男”){
alert(name+”先生，您好！”);
}
}
function danshuang(){
var d = document.getElementById(“ds”).value;
if(d%2!=0){
alert(“此为单数！”);
}else if(d==0){
alert(“此数为0！”);
}else
alert(“此为双数！”);
}
var now=1;
/日历/
function rili(now){
var obj = document.getElementsByTagName(“li”);
var taglength = obj.length;
for(var i=1;i<=taglength;i++){
if(i==now){
var o = document.getElementById(“yue”+now);
var H = document.getElementById(“H”+now);
H.style.color=”#E84A7E”;
o.style.display=”block”;
}else{
var o = document.getElementById(“yue”+i);
var H = document.getElementById(“H”+i);
H.style.color=”white”;
o.style.display=”none”;
}
}
}
/数组提取/
var n=1;
function tiqu(n){
var ar = new Array(“这是第一句”,”这是第二句”,”这是第三句”,”这是第四句”);
var xs = document.getElementById(“div-xs”);
for(var i=1;i<=ar.length;i++){
if(i==n){
xs.innerHTML = ar[i-1];
}
}
if(n==5){
xs.innerHTML = ar[0]+”,”+ar[1]+”,”+ar[2]+”,”+ar[3]
}
}
/9.qiehua/
function show_lm(n1){
var ob1 = document.getElementsByTagName(“li”);
for(var i=1;i<=ob1.length;i++){
if(i==n1){
var obj = document.getElementById(“tag”+n1);
obj.style.display=”block”;
}else{
var obj = document.getElementById(“tag”+i);
obj.style.display=”none”;
}
}
}
function show_lm1(n1){
var ob1 = document.getElementsByTagName(“li”);
for(var i=1;i<=ob1.length;i++){
if(i==n1){
var obj = document.getElementById(“tagg”+n1);
obj.style.display=”block”;
}else{
var obj = document.getElementById(“tagg”+i);
obj.style.display=”none”;
}
}
}
function tijiaohou(){
var t1 = document.getElementById(“div_text”).value;
var d2 = document.getElementById(“d2”);
d2.innerHTML = ‘提交后在这里显示：’+t1;
}
function tijiaohou1(){
var t2 = document.getElementById(“div_text1”).value;
var t3 = document.getElementById(“div_text2”).value;
var d3 = document.getElementById(“d3”);
d3.innerHTML = ‘提交后在这里显示：’+t2+t3;
}“`
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js中关于导航切换效果-之一(鼠标移动)
- Web前端-JS效果-网站首页+图片自动播放、切换等效果
- 表格的hover效果，IE6下用JS解决。--- 当鼠标移动到表格行时出现行背景颜色。
- Web前端-JS效果-图片自动获取焦点与切换
- web前端实验一：利用Js捕获鼠标事件实现图片切换
- js和jquery 两种写法 鼠标经过图片切换背景效果
- JS+DIV表单实例——鼠标移上背景变色和文字提示
- Iframe中使用JS事先切换背景颜色、背景图片的效果
- 一个简单的js鼠标划过切换效果
- 原创JS图片放大效果(二) — 多图点击切换，鼠标移上放大
- GridView控件添加鼠标移入移出时背景行变色的效果
- js鼠标拖动层/层的移动和浮动效果
- [css特效]A标记的经典效果：鼠标放到A的整行上，背景变色(鼠标没在文字上)
- 用js实现表格中鼠标移动行变色
- DataGrid和GridView鼠标移动上面背景变色
- JS+DIV表单实例——鼠标移上背景变色和文字提示
- 使用js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- HTML一种鼠标移动列变色效果
- 纯js实现背景图片切换效果代码
- 实现鼠标移动表格行上，此行背景变色研究