javascirpt 特效编程

rain · 发表于 2014-10-14 21:48:58

本帖最后由 rain 于 2014-10-18 00:41 编辑

先来个最基础的js入门程序，往后就省略开头，直接写中间部分内容。
<script type="text/javascript">
document.write("Hellow World !");
</script>

一、自动刷新页面
方法一：<meta http-equiv="refresh" content="20"> 每20秒刷新一次
方法二：用js写
<script type="text/javascript">
function fresh(){
window.location.reload();
}
setTimeout('fresh()',20000); //自动刷新定时器
</script>
//reload()函数的作用是让浏览器刷新当前网页。

rain · 发表于 2014-11-24 14:53:35

三级联动导航菜单
<html>
<head>
<title>三级联动导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="jquery.js"></script>
<script type="text/javascript">
var arr = []; //定义数据数组变量
//为菜单指定数据，包含了名字和URL
arr[0] = [{name:'菜单1',url:'#'},{name:'菜单11',url:'#'}];
arr[1] = [{name:'菜单2',url:'#'}];
arr[2] = [{name:'菜单3',url:'#'},{name:'菜单31',url:'#'},
{name:'菜单32',url:'#',child:[
{name:'菜单321',url:'#'}
]}]; //包含了子菜单
//在jquery的加载回调函数里操作
$(function(){
//定义菜单的html内容，以ul打头
var html = '<ul class="menu clearfix">';
//根据数组变量的长度，开始串联第一级菜单
for(var i=0;i<arr.length;i++){
html += '<li><a href="#">菜单'+(i+1)+'</a></li>';
}
html += '</ul>';
//第一级菜单组合完成
//开始组合二级菜单
html += '<div class="sub_div clearfix">';
//使用两次循环开始串联第二级菜单
for(var i=0;i<arr.length;i++){
var a = arr[i]; //得到当前的数据
html += '<ul class="sub_menu">';//拼接二级菜单项
var sub_count = 1; //开始计数id
for(var j=0;j<a.length;j++){ //遍历
var item = a[j]; //得到数据
var sub = ''; //定义拼接有子菜单的class属性
if(item['child']) //如果包含了子属性，则定义class
sub = 'sub sub_'+j+'_'+sub_count++;
//拼接动态的第二级菜单的字符
html += '<li><a href="'+item['url']+'" class="'+sub+'" index="'+j+'">'+item['name']+'</a></li>';
}
html += '</ul>'; //完成第二级菜单
var sub_count = 1; //开始为三级菜单的id计数
for(var j=0;j<a.length;j++){ //遍历第三级菜单
var item = a[j]; //得到数据
if(item['child']){ //如果包含三级菜单
var b = item['child']; //得到子菜单项的数据
//拼接第三层的字符
html += '<ul class="third_menu" id="'+'sub_'+j+'_'+sub_count+++'">';
//遍历第三层的数据变量
for(var k=0;k<b.length;k++){
html += '<li><a href="'+b[k]['url']+'">'+b[k]['name']+'</a></li>';
}
html += '</ul>'; //完成第三层
}
}
}
html += '</div>'; //完成全部的菜单html
$('body').append(html); //挂接在body里

var menus = $('.menu a'); //得到菜单下所有的链接
for(var i=0;i<menus.length;i++){//遍历这些链接
var m = menus[i]; //得到当前的链接
$(m).mouseover(function(){ //为菜单链接定义onmouover事件
//得到当前鼠标移入的菜单项的下标
var index = $('.menu a').index(this);
$('.sub_menu').hide(); //把其他二级菜单隐藏
$('.third_menu').hide();//三级也隐藏
$('.sub_menu').eq(index).show();//显示对应的二级菜单
//计算二级菜单应该定位的位置
$('.sub_menu').eq(index).css('margin-left',(100*index)+'px');
});
}
//为包含第三级菜单的二级菜单定义onmouseover事件
$('.sub').mouseover(function(){
//得到它的class属性
var className = $(this).attr('class');
//得到第三级菜单的id值
var subId = className.split(' ')[1];
$('#'+subId).show(); //显示第三级菜单
var index = $(this).attr('index');//得到它的下标
//计算第三级菜单显示的坐标位置
$('#'+subId).css('margin-top',(parseInt(index)*20)+'px');
});
});
</script>
<style>
.menu{
list-style: none;
width: 500px;
margin: 10px auto 0;
padding:0;
}
.menu li{
float:left;
width:98px;
border:1px solid black;
}
.menu a{
color:black;
width:100%;
}
.menu a:hover{
background-color:pink;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sub_menu{
border:1px solid black;
width: 100px;
padding:0;
display: none;
margin:0;
float:left;
}
.sub_div{
width: 505px;
margin: 0 auto;
}
.third_menu{
display:none;
float: left;
border:1px solid black;
width: 100px;
padding:0;
margin:0;
}
</style>
</head>
<body style="text-align:center">

</body>
</html>

rain · 发表于 2014-11-24 14:52:55

动态加载导航菜单
<html>
<head>
<title>动态加载的导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="jquery.js"></script>
<script type="text/javascript">
var arr = []; //定义数据数组变量
//为菜单指定数据，包含了名字和URL
arr[0] = [{name:'菜单1',url:'#'},{name:'菜单11',url:'#'}];
arr[1] = [{name:'菜单2',url:'#'}];
arr[2] = [{name:'菜单3',url:'#'},{name:'菜单31',url:'#'},{name:'菜单32',url:'#'}];
//在jquery的加载回调函数里操作
$(function(){
//定义菜单的html内容，以ul打头
var html = '<ul class="menu clearfix">';
//根据数组变量的长度，开始串联第一级菜单
for(var i=0;i<arr.length;i++){
html += '<li><a href="#">菜单'+(i+1)+'</a></li>';
}
html += '</ul>';
//第一级菜单组合完成
//开始组合二级菜单
html += '<div class="sub_div clearfix">';
//使用两次循环开始串联第二级菜单
for(var i=0;i<arr.length;i++){
var a = arr[i];
html += '<ul class="sub_menu">';//使用sub_menu的ul
for(var j=0;j<a.length;j++){
var item = a[j]; //得到数据
//拼接字符
html += '<li><a href="'+item['url']+'">'+item['name']+'</a></li>';
}
html += '</ul>'; //完成ul
}
html += '</div>'; //完成全部的菜单html
$('body').append(html); //挂接在body里
//开始指定菜单的功能
var menus = $('.menu a'); //得到菜单下所有的链接
for(var i=0;i<menus.length;i++){//遍历这些链接
var m = menus[i]; //得到当前的链接
$(m).mouseover(function(){ //为菜单链接定义onmouover事件
//得到当前鼠标移入的菜单项的下标
var index = $('.menu a').index(this);
$('.sub_menu').hide(); //把所有的二级菜单隐藏
$('.sub_menu').eq(index).show();//显示当前下标的菜单项
//并且计算出这个菜单项应该处于的定位位置
$('.sub_menu').eq(index).css('margin-left',(100*index)+'px');
});
}
});
</script>
<style>
.menu{
list-style: none;
width: 300px;
margin: 10px auto 0;
padding:0;
}
.menu li{
float:left;
width:98px;
border:1px solid black;
}
.menu a{
color:black;
width:100%;
}
.menu a:hover{
background-color:pink;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sub_menu{
border:1px solid black;
width: 100px;
padding:0;
display: none;
margin:0;
float:left;
}
.sub_div{
width: 305px;
margin: 0 auto;
}
</style>
</head>
<body style="text-align:center">

</body>
</html>

rain · 发表于 2014-11-17 22:11:03

带下拉菜单的导航栏
<html>
<head>
<title>二级导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="jquery.js"></script>
<script type="text/javascript">
//使用jquery的加载回调函数开始定义菜单的功能
$(function(){
var menus = $('.menu a'); //得到菜单下所有的链接
for(var i=0;i<menus.length;i++){//遍历这些链接
var m = menus[i]; //得到当前的链接
$(m).mouseover(function(){ //为菜单链接定义onmouover事件
//得到当前鼠标移入的菜单项的下标
var index = $('.menu a').index(this);
$('.sub_menu').hide(); //把所有的二级菜单隐藏
$('.sub_menu').eq(index).show();//显示当前下标的菜单项
//并且计算出这个菜单项应该处于的定位位置
$('.sub_menu').eq(index).css('margin-left',(100*index)+'px');
});
}
});
</script>
<style>
.menu{
list-style: none;
width: 400px;
margin: 10px auto 0;
padding:0;
}
.menu li{
float:left;
width:98px;
border:1px solid black;
}
.menu a{
color:black;
width:100%;
}
.menu a:hover{
background-color:pink;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sub_menu{
border:1px solid black;
width: 100px;
padding:0;
display: none;
margin:0;
}
.sub_div{
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body style="text-align:center">
<ul class="menu clearfix">
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
</ul>
<div class="sub_div">
<ul class="sub_menu">
<li><a href="#">菜单</a></li>
</ul>
<ul class="sub_menu">
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
</ul>
<ul class="sub_menu">
<li><a href="#">菜单</a></li>
</ul>
<ul class="sub_menu">
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
</ul>
</div>
</body>
</html>

rain · 发表于 2014-11-17 17:29:45

<html>
<head>
<title>让表格行的背景颜色间隔开</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
//为表格改变样式的函数
function chCell(){
//获取DOM
var tbl = document.getElementById('tbl');
var rows = tbl.rows; //得到当前的表格的row数组
var len = tbl.rows.length; //当前的行数
for(var i=1;i<len;i++){ //遍历所有行
var r = rows[i]; //当前行
r.onmouseover = function(){ //定义鼠标移入事件
//把背景色变成粉红色
this.style.backgroundColor = 'pink';
};
r.onmouseout = function(){ //定义鼠标移出事件
//把背景色变回白色
this.style.backgroundColor = 'white';
};
}
}
</script>
</head>
<body style="text-align:center" onLoad="chCell();">
<table id="tbl" align="center" border="1">
<tr>
<th>名字</th>
<th>年龄</th>
</tr>
<tr>
<td>A</td>
<td>12</td>
</tr>
<tr>
<td>B</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>15</td>
</tr>
</table>
</body>
</html>

rain · 发表于 2014-11-13 20:26:36

本帖最后由 rain 于 2014-11-13 20:45 编辑

绕死人的浮动框
<html>
      <head>
            <title>悬浮的广告层</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <script type="text/javascript">
                     function goScroll(o){
                              var space=document.getElementById(o).offsetTop;
                              document.getElementById(o).style.top=space+'px';
                              var goTo = 0;
                              window.setInterval(function(){
                                    var height =document.documentElement.scrollTop+document.body.scrollTop+space;
                                    var top = parseInt(document.getElementById(o).style.top);
                                    if(height!= top){
                                             goTo = height-parseInt((height - top)*0.9);
                                             document.getElementById(o).style.top=goTo+'px';
                                    }
                              },50);
                     }
                     function init(){
                              goScroll('con1');
                     }
            </script>
            <style>
                     #con1{
                              background-color:gray;
                              left: 0px;
                              top: 100px;
                              width:100px;
                              height:100px;
                              position: absolute;
                              z-index = 1;
                     }
            </style>
      </head>
      <body style="text-align:center">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <div id="con1">
                     这是一个广告
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      </body>
</html>

document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样：

var sTop=document.body.scrollTop+document.documentElement.scrollTop;

这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。

rain · 发表于 2014-11-13 17:39:53

本帖最后由 rain 于 2014-11-13 17:43 编辑

<html>
<head>
<title>广告图切换特效

</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <script type="text/javascript">
            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>';
                     }
                     var btns = document.getElementsByClassName('slideshow-bt');
                     btns[length-1].className += ' bt-on';
                     for(var i=0;i<btns.length;i++){
                              btns.onclick=function(){
slideTo(this.attributes['index'].value);
                              };
                     }
                     setInterval(function(){
                              if(currIndex + 1 > 5)
                                    currIndex = 0;
                              slideTo(currIndex + 1);
                     },3000);
            }
            function slideTo(index){
                     index = parseInt(index);
                     var picArr = document.getElementById('slideshow_photo').childNodes;
                     for(var i=0;i<picArr.length;i++){
if(picArr.attributes
                                    && picArr.attributes['index']
                                    && parseInt(picArr.attributes['index'].value)==index){
                                    picArr.style.zIndex = 2;
                                    currIndex = index;
                              }else if(picArr.attributes
                                    && picArr.attributes['index']){
                                    picArr.style.zIndex = 1;
                              }
                     }
var btns = document.getElementsByClassName('slideshow-bt');
                     for(var i=0;i<btns.length;i++){
                              if(parseInt(btns.attributes['index'].value) == index){
                                    btns.className = 'slideshow-bt bt-on';
                              }else{
                                    btns.className = 'slideshow-bt';
                              }
                     }
            }
            </script>
            <style>
#slideshow_wrapper {
      POSITION: relative;
      PADDING-BOTTOM: 0px;
      BACKGROUND-COLOR: #121212;
      PADDING-LEFT: 0px;
      WIDTH: 650px;
      PADDING-RIGHT: 0px;
      HEIGHT: 400px;
      OVERFLOW: hidden;
      PADDING-TOP: 0px
}
#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: pointer
}
#slideshow_photo A {
      Z-INDEX: 1;
      BORDER-BOTTOM: 0px;
      POSITION: absolute;
      BORDER-LEFT: 0px;
      MARGIN: 0px;
      DISPLAY: block;
      BORDER-TOP: 0px;
      TOP: 0px;
      BORDER-RIGHT: 0px;
      LEFT: 0px
}
#slideshow_footbar .slideshow-bt {
      BACKGROUND-COLOR: #d2d3d4;
      MARGIN: 10px 10px 0px 0px;
      WIDTH: 10px;
      DISPLAY: inline;
      FLOAT: right;
      HEIGHT: 10px;
      FONT-SIZE: 0px
}
#slideshow_footbar .bt-on {
      BACKGROUND-COLOR: #30b1eb
}
            </style>
      </head>
      <body style="text-align:center">
            <DIV id="slideshow_wrapper">
                     <DIV id="slideshow_photo">
                              <A target="_blank" style="Z-INDEX: 2" href="#" index="1"><IMG border=0 src="2.jpg"></A>
                              <A target="_blank" style="Z-INDEX: 1" href="#" index="2"><IMG border=0 src="3.jpg"></A>
                              <A target="_blank" style="Z-INDEX: 1" href="#" index="3"><IMG border=0 src="3.jpg"></A>
                              <A target="_blank" style="Z-INDEX: 1" href="#" index="4"><IMG border=0 src="3.jpg"></A>
                              <A target="_blank" style="Z-INDEX: 1" href="#" index="5"><IMG border=0 src="3.jpg"></A>
                     </DIV>
                     <DIV id="slideshow_footbar"></DIV>
            </DIV>
      </body>
</html>

rain · 发表于 2014-11-13 16:47:29

本帖最后由 rain 于 2014-11-13 20:27 编辑

<html>
      <head>
            <title>可以拖动的层</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <script type="text/javascript">
                     var isOver = false;                                              //是否正在移动的标志变量
                     var l = 0;                                                             //left变量
                     var t = 0;                                                             //top变量
                     //监听网页加载完成的事件
                     function init(){
                              //获取层box的DOM
                              var boxTitle = document.getElementById('boxTitle');
                              boxTitle.onmousedown = mouseDown;       //设置mousedown事件
                              boxTitle.onmousemove = mouseMove;       //设置mousemove事件
                              boxTitle.onmouseup = mouseUp;             //设置mouseup事件
                     }
                     //定义box的鼠标按下事件
                     function mouseDown(event){
                              var e = event;                                              //定义事件e变量
                              x = e.clientX;                                              //得到事件发生的x坐标
                              y = e.clientY;                                              //得到事件发生的y坐标
                              //得到box的左上角的坐标
                              l = parseInt(document.getElementById("box").style.left);
                              t = parseInt(document.getElementById("box").style.top);
                              isOver=true;                                              //把正在移动变量设置为true
                     }
                     function mouseMove(event){
                              if(isOver){                                                       //当正在移动的时候
                                    var e = event;                                     //得到事件变量e
                                    //得到box的DOM
                                    var box = document.getElementById("box");
                                    var newleft = l + e.clientX - x;//计算新的left的值
                                    var newtop = t + e.clientY - y;       //计算新的top的值
                                    box.style.left = newleft + "px";//设置新的left值，带上单位
                                    box.style.top = newtop + "px";       //设置新的top值，带上单位
                              }
                     }
                     function mouseUp(event){                               //鼠标按下释放事件
                              if(isOver){
                                    isOver = false;                               //设置变量为false
                              }
                     }
            </script>
            <style>
            </style>
      </head>
      <body style="text-align:center">
            <div id="box" style="border: 1px solid black; position: absolute; left: 200px; top: 100px; width: 300px; height: 200px; z-index: 99;">
                     <h4 align="right" id="boxTitle" style="margin: 0px; padding: 3px; background-color: black; opacity: 0.75; border: 1px solid black; height: 18px; cursor: pointer;">
                     <span style="float:left; color:white;">这里是标题栏</span></h4>
                     <div id="boxMsg">这是一个可拖动的层</div>
            </div>
      </body>
</html>

rain · 发表于 2014-11-13 15:55:34

<html>
<head>
<title>从下往上的信息滚动特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
var timer = null; //定时器
//页面加载完成的事件回调
function init(){
var time = 30; //定义滚动的时间间隔，毫秒
//获取容器的DOM
var container = document.getElementById('container');
var d1 = document.getElementById('con1');
var d2 = document.getElementById('con2');
d2.innerHTML = d1.innerHTML //把第二个容器的内容填充为第一个
function MyMarquee(){ //定义滚动的函数
//如果d2的高度已经超过最大的限制
if(d2.offsetHeight <= container.scrollTop)
//把容器的滚动条恢复到最初的位置
container.scrollTop -= d1.offsetHeight;
else{
//滚动条的位置往top移动一个像素
container.scrollTop++;
}
}
timer = setInterval(MyMarquee,time);//开始一个定时执行
container.onmouseover=function() { //定义鼠标放上事件
clearInterval(timer); //结束滚动
}
container.onmouseout=function() { //定义鼠标移出事件
timer=setInterval(MyMarquee,time);//再次开始
}
}
</script>
</head>
<body style="text-align:center" onLoad="init();">
<div id="container" style="overflow:hidden;height:100px;">
<table align="left" cellpadding="0" cellspace="0" border="0">
<tr>
<td id="con1" valign="top">
<img src="1.jpg"><img src="1.jpg"><img src="1.jpg">
</td>
</tr>
<tr>
<td id="con2" valign="top"></td>
</tr>
</table>
</div>
</body>
</html>

rain · 发表于 2014-10-18 05:12:58

十、在网页里动态加载javascript

function  loadJs(){
   var  theHead = document.getElementsByTagName('head').item(0); //得到html的头部dom
   var  myScript = document.createElement('script'); //创建脚本的dom对象实例
   myScript.src='./myjs.js';       //指定脚本路径
   myScript.type='text/javascript';    //指定脚本类型
   myScript.defer=true;       //程序下载完后再解析和执行
   theHead.appendChild(myScript); //把dom挂载到头部
                        ｝

定义按钮
<input type="button" value="动态加载JS"  onclick=loadJS() />

		自动登录	找回密码
密码			立即注册