JavaScript特效动画实例—图片轮播 右下角图片广告 原生js日历
2015-04-17 20:44
941 查看
上周面试了两家著名互联网公司的前端开发实习生，他们都问了同样的一个问题，你有没有用js写过一些动画或者写过一些交互性的东西。由此，我意识到了要想成为一个合格的前端工程师，js动画是必须要熟练掌握的，比如用原生js写幻灯片、轮播、导航菜单，等等。因此，我想把js动画实例总结起来，一方面提高自己的编程水平，另一方面，对于准备面试也大有裨益。
1、自动刷新页面 location.reload() setTimeinterval(function,1000)
2、让页面后退和前进：history.forward() history.back()
3、页面等待：div display:none 然后动态改变其display属性
4、动态修改标题：
点击跳转另外一个地址：location.href=.... .value;
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
function changeTitle()
{
document.title=document.getElementById("input").value;
}
</script>
</head>
<body>
<input type="text" id="input" value=""/>
<input type="button" value="修改标题" id="button" onclick="changeTitle()">
</body>
</html>
window.onload=function:页面加载完全后调用
实例5、带关闭按钮的右下角图片广告，始终悬浮在窗口右下角
ad.sytle.top=document.body.clientHeight-120; 网页可见区域高
ad.style.left=document.body.clientWidth-200; 网页可见区域宽度
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
function posRightCorner(){
ad.style.top=document.body.clientHeight-120;
ad.style.left=document.body.clientWidth-200;
setTimeout("posRightCorner()",100);
}
function closeAD()
{
ad.style.display="none";
}
window.onload=function(){
var ad=document.getElementById('ad');
posRightCorner();
}
</script>
</head>
<body>
<div style="border:1px solid black;z-index:99999;width:180px;position:absolute;height:116px;background-color:rgb(201,211,243);" id="ad">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#cfdef4">
<tr>
<td width="90%" valign="middle" height="24"></td>
<td width="" valign="middle" align="right">
<a title="关闭" onclick="closeAD()" style="cursor:pointer;">X</a>
</td>
</tr>
<tr>
<td height="90" colspan="3">广告内容，内增高</td>
</tr>
</table>
</div>
</body>
</html>
实例6、表单：表单form，对于一般dom元素来说，通过点操作符只能访问到自身的属性的值，而表单元素可以访问到它包含的控件。通过name属性
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
function ck(){
var f=document.forms[0];
f.reset(); //初始化表单里所有控件的值到最初状态
//动态为表单添加边框
f.style.width="300px";
f.style.border="1px solid black";
var e1=f.myRadio[0];
e1.focus();//让控件获得焦点
document.forms[0].myhidden.value="我是隐藏的";
var e=f.elements;
var str='';
var e1=f.myText;
alert(e1.value);
for(var i=0;i<e.length;i++)
{
str+=e[i].value+' ';
}
alert(str);
}
</script>
</head>
<body>
<form>
文本框：<input type="text" name="myText" value=""/>
<br/>
单选框：<input type="radio" name="myRadio" value="11"/><input type="radio" name="myRadio" value="22"/>
<br/>
下拉框：<select name="mySelect">
<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br/>
<input type="button" value="得到控件的值" onclick="ck();"/>
<input type="hidden" name="hidden" />
</form>
</body>
</html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function(){
var arr=document.getElementsByName("myname");
for(var i=0;i<arr.length;i++)
{
arr[i].checked=true;
}
}
</script>
</head>
<body id="body">
<form>
<input type="checkbox" name="myname"/>全选
<input type="checkbox" name="myname"/>全选
<input type="checkbox" name="myname"/>
</form>
</body>
</html>
禁用鼠标右键
动态定义鼠标形状：node.style.cursor="pointer"
鼠标进出时字体发生变化：
实例7：图片轮播js
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
//未解决：：1、监听鼠标切入清楚定时器，2、下标少了
//z-index 和position:absolute隐藏
var currIndex=1;
function init()
{
var length=5;
for(var i=0;i<length;i++)
{
document.getElementById("slideshow_footbar").innerHTML+='<div class="slideshow_bt" index="'+(length-i)+'"></div>';
}
//得到按钮的doms
var btns=document.getElementsByClassName('slideshow_bt');
btns[length-1].className+='bt-on';
for(var i=0;i<btns.length;i++)
{
btns[i].onclick=function(){
slideTo(this.attributes['index'].value);
};
}
setInterval(function(){
if(currIndex+1>5)
{currIndex=0;}
slideTo(currIndex+1);
},5000);
}
function slideTo(index){
index=parseInt(index);
var picArr=document.getElementById("slideshow_photo").childNodes;
for(var i=0;i<picArr.length;i++)
{
if(picArr[i].attributes&&picArr[i].attributes['index']&&parseInt(picArr[i].attributes['index'].value)==index)
{
picArr[i].style.zIndex=2;
currIndex=index;
}else if(picArr[i].attributes&&picArr[i].attributes['index']){
picArr[i].style.zIndex=1;
}
}
//处理下标
var btns=document.getElementsByClassName("slideshow_bt");
for(var i=0;i<btns.length;i++)
{
if(parseInt(btns[i].attributes['index'].value)==index)
{btns[i].className='slideshow_bt bt-on';}else{
btns[i].className='slideshow_bt';
}
}
}
</script>
<link rel="stylesheet" type="text/css" href="css/slide.css"/>
</head>
<body onload="init();">
<div id="slideshow_wrapper">
<div id="slideshow_photo">
<a target="_blank" style="z-index:2" href="#" index="1"><img border=0 src="1.jpg" height="400px" width="650px"/></a>
<a target="_blank" style="z-index:1" href="#" index="2"><img border=0 src="2.jpg" height="400px" width="650px"/></a>
<a target="_blank" style="z-index:1" href="#" index="3"><img border=0 src="3.jpg" height="400px" width="650px"/></a>
<a target="_blank" style="z-index:1" href="#" index="4"><img border=0 src="4.jpg" height="400px" width="650px"/></a>
<a target="_blank" style="z-index:1" href="#" index="5"><img border=0 src="5.jpg" height="400px" width="650px"/></a>
</div>
<div id="slideshow_footbar">
</div>
</div>
</body>
</html>
slide.css
#slideshow_wrapper{
position:relative;
padding:0px;
background-color:gray;
width:650px;
height:400px;
overflow:hidden;
}
#slideshow_footbar{
z-index:5;
position:absolute;
filter:alpha(opacity=50); /*滤镜，具体还不太清楚*/
width:100%;
bottom:0px;
height:30px;
background-color:black;
opacity:0.5; /* 半透明*/
}
#slideshow_photo{
position:absolute;
width:100%;
height:100%;
cursor:point;
}
#slideshow_photo a{
z-index:1;
border:0px;
position:absolute;
margin:0px;
display:block;
top:0px;
left:0px;
}
#slideshow_footbar .slideshow_bt{
background-color:#d2d3d4;
margin:10px 10px 0px 0px;
width:10px;
height:10px;
display:inline;
float:right;
font-size:12px;
} /*为什么会居中，为什么表现形式*/
#slideshow_footbar .bt-on{
background-color:#30b1eb;
}
//问题：1、小标少了 2、鼠标切入停止切换
实例8：从左往右浏览广告
<html>
<head> <title>ajax</title> <meta charset="utf-8"> <script type="text/javascript"> //由左向右滚动广告 var timer=null; function init(){ var time=30; var con_ul=document.getElementById("con_ul");
function MyMarquee(){ var left=con_ul.style.left; left=parseInt(left); con_ul.style.left=(left-1)+'px'; if(left*-2==parseInt(con_ul.style.width)){ con_ul.innerHTML+=con_ul.innerHTML; } } timer=setInterval(MyMarquee,time); con_ul.onmouseover=function(){
clearInterval(timer); } con_ul.onmouseout=function(){ timer=setInterval(MyMarquee,time); } } </script> <style> #container li{overflow:hidden; float:left; margin:0 5px;} </style> <link rel="stylesheet" type="text/css" href="css/slide.css"/> </head>
<body style="text-align:center" onload="init();"> <div id="container" style="width:400px;visibility:visible;overflow:hidden;position:relative; z-index:1;left:0px;"> <ul id="con_ul" style="margin:0px;padding:0px;position:relative;list-style-type:none;
z-index:2;width:6100px;left:0px;"> <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li> <li><a target="_blank" href="#"><img src="2.jpg"><br>123123</a></li> <li><a target="_blank" href="#"><img src="3.jpg"><br>123123</a></li> <li><a target="_blank"
href="#"><img src="4.jpg"><br>123123</a></li> <li><a target="_blank" href="#"><img src="5.jpg"><br>123123</a></li> </ul> </div> </body> </html>
实例9：选中日期并显示
效果图上图
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT LANGUAGE="JavaScript">
function init(){
var y=document.getElementById("y");
var m=document.getElementById("m");
var str="";
for(var i=2000;i<2030;i++)
{
str+='<option value="'+i+'">'+i+'</option>';
}
y.innerHTML=str;
str="";
for(var i=1;i<=12;i++)
{
str+='<option value="'+i+'">'+i+'</option>';
}
m.innerHTML=str;
}
function showDetail(){
var year=document.getElementById("y").value;
year=parseInt(year);
var month=parseInt(document.getElementById('m').value);
var days=30;
if(isRunNian(year)&&month==2){
days=29;
}
else if(month==1||month==3||month==5||month==7||month==8||month==10||month==12)
{days=31;}
var str='<tr>';
for(var i=1;i<=7;i++)
{
str+="<td>星期"+i+"</td>";
}
str+="</tr>";
var date=new Date(year,month-1,1);
var week=date.getDay();
var j=1;
while(true)
{
str+='<tr>';
for(var i=1;i<=7;i++)
{
if(j==1&&i==week)
{
str+='<td onclick="fillDay('+j+');">1</td>';
j++;
}else if(j>1&&j<=days){
str+='<td onclick="fillDay('+j+');">'+j+'</td>';
j++;
}else
str+="<td> </td>";
}
str+='</tr>';
if(j>days)
break;
}
document.getElementById("tb1").innerHTML=str;
}
function isRunNian(y){
return y%4==0;
}
function fillDay(d)
{
var y=document.getElementById("y").value;
var m=document.getElementById("m").value;
window.currDateInput.value=y+"年"+m+"月"+d+"日";
}
function inputDate(input)
{
window.currDateInput=input;
var d=document.getElementById("d_div");
var y=document.getElementById("y");
var m=document.getElementById("m");
var now=new Date();
y.value=now.getFullYear();
m.value=now.getMonth()+1;
d.style.display="block";
showDetail();
}
</SCRIPT>
</head>
<body style="text-align:center" onload="init();">
<p><input type="text" onfocus="inputDate(this)"/></p>
<div id="d_div" style="border:1px solid red; display:none;width:400px;margin:0 auto; padding:5px;">
<p>
<select id="y"></select>年
<select id="m" onchange="showDetail()"></select>月
</p>
<table id="tb1" border="1" align="center"></table>
</div>
<a href="http://www.baidu.com">dddd</a>
<script src="https://code.jquery.com/jquery.js"></script>
</body>
</html>
1、自动刷新页面 location.reload() setTimeinterval(function,1000)
2、让页面后退和前进：history.forward() history.back()
3、页面等待：div display:none 然后动态改变其display属性
4、动态修改标题：
点击跳转另外一个地址：location.href=.... .value;
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
function changeTitle()
{
document.title=document.getElementById("input").value;
}
</script>
</head>
<body>
<input type="text" id="input" value=""/>
<input type="button" value="修改标题" id="button" onclick="changeTitle()">
</body>
</html>
window.onload=function:页面加载完全后调用
实例5、带关闭按钮的右下角图片广告，始终悬浮在窗口右下角
ad.sytle.top=document.body.clientHeight-120; 网页可见区域高
ad.style.left=document.body.clientWidth-200; 网页可见区域宽度
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
function posRightCorner(){
ad.style.top=document.body.clientHeight-120;
ad.style.left=document.body.clientWidth-200;
setTimeout("posRightCorner()",100);
}
function closeAD()
{
ad.style.display="none";
}
window.onload=function(){
var ad=document.getElementById('ad');
posRightCorner();
}
</script>
</head>
<body>
<div style="border:1px solid black;z-index:99999;width:180px;position:absolute;height:116px;background-color:rgb(201,211,243);" id="ad">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#cfdef4">
<tr>
<td width="90%" valign="middle" height="24"></td>
<td width="" valign="middle" align="right">
<a title="关闭" onclick="closeAD()" style="cursor:pointer;">X</a>
</td>
</tr>
<tr>
<td height="90" colspan="3">广告内容，内增高</td>
</tr>
</table>
</div>
</body>
</html>
实例6、表单：表单form，对于一般dom元素来说，通过点操作符只能访问到自身的属性的值，而表单元素可以访问到它包含的控件。通过name属性
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
function ck(){
var f=document.forms[0];
f.reset(); //初始化表单里所有控件的值到最初状态
//动态为表单添加边框
f.style.width="300px";
f.style.border="1px solid black";
var e1=f.myRadio[0];
e1.focus();//让控件获得焦点
document.forms[0].myhidden.value="我是隐藏的";
var e=f.elements;
var str='';
var e1=f.myText;
alert(e1.value);
for(var i=0;i<e.length;i++)
{
str+=e[i].value+' ';
}
alert(str);
}
</script>
</head>
<body>
<form>
文本框：<input type="text" name="myText" value=""/>
<br/>
单选框：<input type="radio" name="myRadio" value="11"/><input type="radio" name="myRadio" value="22"/>
<br/>
下拉框：<select name="mySelect">
<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br/>
<input type="button" value="得到控件的值" onclick="ck();"/>
<input type="hidden" name="hidden" />
</form>
</body>
</html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function(){
var arr=document.getElementsByName("myname");
for(var i=0;i<arr.length;i++)
{
arr[i].checked=true;
}
}
</script>
</head>
<body id="body">
<form>
<input type="checkbox" name="myname"/>全选
<input type="checkbox" name="myname"/>全选
<input type="checkbox" name="myname"/>
</form>
</body>
</html>
禁用鼠标右键
动态定义鼠标形状：node.style.cursor="pointer"
鼠标进出时字体发生变化：
实例7：图片轮播js
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
//未解决：：1、监听鼠标切入清楚定时器，2、下标少了
//z-index 和position:absolute隐藏
var currIndex=1;
function init()
{
var length=5;
for(var i=0;i<length;i++)
{
document.getElementById("slideshow_footbar").innerHTML+='<div class="slideshow_bt" index="'+(length-i)+'"></div>';
}
//得到按钮的doms
var btns=document.getElementsByClassName('slideshow_bt');
btns[length-1].className+='bt-on';
for(var i=0;i<btns.length;i++)
{
btns[i].onclick=function(){
slideTo(this.attributes['index'].value);
};
}
setInterval(function(){
if(currIndex+1>5)
{currIndex=0;}
slideTo(currIndex+1);
},5000);
}
function slideTo(index){
index=parseInt(index);
var picArr=document.getElementById("slideshow_photo").childNodes;
for(var i=0;i<picArr.length;i++)
{
if(picArr[i].attributes&&picArr[i].attributes['index']&&parseInt(picArr[i].attributes['index'].value)==index)
{
picArr[i].style.zIndex=2;
currIndex=index;
}else if(picArr[i].attributes&&picArr[i].attributes['index']){
picArr[i].style.zIndex=1;
}
}
//处理下标
var btns=document.getElementsByClassName("slideshow_bt");
for(var i=0;i<btns.length;i++)
{
if(parseInt(btns[i].attributes['index'].value)==index)
{btns[i].className='slideshow_bt bt-on';}else{
btns[i].className='slideshow_bt';
}
}
}
</script>
<link rel="stylesheet" type="text/css" href="css/slide.css"/>
</head>
<body onload="init();">
<div id="slideshow_wrapper">
<div id="slideshow_photo">
<a target="_blank" style="z-index:2" href="#" index="1"><img border=0 src="1.jpg" height="400px" width="650px"/></a>
<a target="_blank" style="z-index:1" href="#" index="2"><img border=0 src="2.jpg" height="400px" width="650px"/></a>
<a target="_blank" style="z-index:1" href="#" index="3"><img border=0 src="3.jpg" height="400px" width="650px"/></a>
<a target="_blank" style="z-index:1" href="#" index="4"><img border=0 src="4.jpg" height="400px" width="650px"/></a>
<a target="_blank" style="z-index:1" href="#" index="5"><img border=0 src="5.jpg" height="400px" width="650px"/></a>
</div>
<div id="slideshow_footbar">
</div>
</div>
</body>
</html>
slide.css
#slideshow_wrapper{
position:relative;
padding:0px;
background-color:gray;
width:650px;
height:400px;
overflow:hidden;
}
#slideshow_footbar{
z-index:5;
position:absolute;
filter:alpha(opacity=50); /*滤镜，具体还不太清楚*/
width:100%;
bottom:0px;
height:30px;
background-color:black;
opacity:0.5; /* 半透明*/
}
#slideshow_photo{
position:absolute;
width:100%;
height:100%;
cursor:point;
}
#slideshow_photo a{
z-index:1;
border:0px;
position:absolute;
margin:0px;
display:block;
top:0px;
left:0px;
}
#slideshow_footbar .slideshow_bt{
background-color:#d2d3d4;
margin:10px 10px 0px 0px;
width:10px;
height:10px;
display:inline;
float:right;
font-size:12px;
} /*为什么会居中，为什么表现形式*/
#slideshow_footbar .bt-on{
background-color:#30b1eb;
}
//问题：1、小标少了 2、鼠标切入停止切换
实例8：从左往右浏览广告
<html>
<head> <title>ajax</title> <meta charset="utf-8"> <script type="text/javascript"> //由左向右滚动广告 var timer=null; function init(){ var time=30; var con_ul=document.getElementById("con_ul");
function MyMarquee(){ var left=con_ul.style.left; left=parseInt(left); con_ul.style.left=(left-1)+'px'; if(left*-2==parseInt(con_ul.style.width)){ con_ul.innerHTML+=con_ul.innerHTML; } } timer=setInterval(MyMarquee,time); con_ul.onmouseover=function(){
clearInterval(timer); } con_ul.onmouseout=function(){ timer=setInterval(MyMarquee,time); } } </script> <style> #container li{overflow:hidden; float:left; margin:0 5px;} </style> <link rel="stylesheet" type="text/css" href="css/slide.css"/> </head>
<body style="text-align:center" onload="init();"> <div id="container" style="width:400px;visibility:visible;overflow:hidden;position:relative; z-index:1;left:0px;"> <ul id="con_ul" style="margin:0px;padding:0px;position:relative;list-style-type:none;
z-index:2;width:6100px;left:0px;"> <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li> <li><a target="_blank" href="#"><img src="2.jpg"><br>123123</a></li> <li><a target="_blank" href="#"><img src="3.jpg"><br>123123</a></li> <li><a target="_blank"
href="#"><img src="4.jpg"><br>123123</a></li> <li><a target="_blank" href="#"><img src="5.jpg"><br>123123</a></li> </ul> </div> </body> </html>
实例9：选中日期并显示
效果图上图
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT LANGUAGE="JavaScript">
function init(){
var y=document.getElementById("y");
var m=document.getElementById("m");
var str="";
for(var i=2000;i<2030;i++)
{
str+='<option value="'+i+'">'+i+'</option>';
}
y.innerHTML=str;
str="";
for(var i=1;i<=12;i++)
{
str+='<option value="'+i+'">'+i+'</option>';
}
m.innerHTML=str;
}
function showDetail(){
var year=document.getElementById("y").value;
year=parseInt(year);
var month=parseInt(document.getElementById('m').value);
var days=30;
if(isRunNian(year)&&month==2){
days=29;
}
else if(month==1||month==3||month==5||month==7||month==8||month==10||month==12)
{days=31;}
var str='<tr>';
for(var i=1;i<=7;i++)
{
str+="<td>星期"+i+"</td>";
}
str+="</tr>";
var date=new Date(year,month-1,1);
var week=date.getDay();
var j=1;
while(true)
{
str+='<tr>';
for(var i=1;i<=7;i++)
{
if(j==1&&i==week)
{
str+='<td onclick="fillDay('+j+');">1</td>';
j++;
}else if(j>1&&j<=days){
str+='<td onclick="fillDay('+j+');">'+j+'</td>';
j++;
}else
str+="<td> </td>";
}
str+='</tr>';
if(j>days)
break;
}
document.getElementById("tb1").innerHTML=str;
}
function isRunNian(y){
return y%4==0;
}
function fillDay(d)
{
var y=document.getElementById("y").value;
var m=document.getElementById("m").value;
window.currDateInput.value=y+"年"+m+"月"+d+"日";
}
function inputDate(input)
{
window.currDateInput=input;
var d=document.getElementById("d_div");
var y=document.getElementById("y");
var m=document.getElementById("m");
var now=new Date();
y.value=now.getFullYear();
m.value=now.getMonth()+1;
d.style.display="block";
showDetail();
}
</SCRIPT>
</head>
<body style="text-align:center" onload="init();">
<p><input type="text" onfocus="inputDate(this)"/></p>
<div id="d_div" style="border:1px solid red; display:none;width:400px;margin:0 auto; padding:5px;">
<p>
<select id="y"></select>年
<select id="m" onchange="showDetail()"></select>月
</p>
<table id="tb1" border="1" align="center"></table>
</div>
<a href="http://www.baidu.com">dddd</a>
<script src="https://code.jquery.com/jquery.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 原生js和jquery实现图片轮播特效
- 原生js和jquery实现图片轮播特效
- 原生js实现图片轮播特效
- JavaScript仿商城实现图片广告轮播实例代码
- 原生js实现图片轮播特效
- 原生js和jquery实现图片轮播特效
- 用JQ 写的 广告图片轮播 幻灯片JS特效代码分享
- 原生js和jquery实现图片轮播特效
- JavaScript仿商城实现图片广告轮播实例代码
- 原生JS实现图片轮播与淡入效果的简单实例
- JS原生代码实现图片轮播无缝切换的一种思路
- javascript实例分享---具有立体效果的图片特效
- JavaScript 实例 | 使用原生 JS 写五子棋
- JS简单的轮播的图片滚动实例
- 轻松实现javascript图片轮播特效
- JavaScript - 轮播广告实例
- jQuery插件slicebox实现3D动画图片轮播切换特效
- 原生js实现tab选项卡里内嵌图片滚动特效代码
- 摩天轮图片轮播特效 图片从左到右循环轮播的Jquery JS特效
- javascript图片轮播之gallery.js