简单js效果整理

来源:互联网 发布:zepto.js下载 编辑:程序博客网 时间:2024/05/16 11:25

逐字输出效果

<script type="text/javascript"> 
window.onload=function(){    //必须等待网页中所有的内容加载完毕后包括图片才能执行所有内容加载完毕后执行

  var content=document.getElementById("content");   //获取id
  var str="落鸿断声中繁华一场梦";   //输出的内容
  var i=0;
  var flag=null;
  function done(){  //循环输出
    if(i<str.length){
      content.innerHTML=str.substring(0,i+1);   //输出的内容从零到i+1
      i=i+1;   
    } 
    else{
      clearInterval(flag);
    } 
  }
  flag=setInterval(done,200);
}
</script> 


高度对比

<script type="text/javascript">

function setheight(){
//判断控制页面初始时左右的高度一致 
   var hl = $(".itemleft").outerHeight(); //获取左侧left层的高度 
   var hr = $(".itemright").outerHeight(); //获取右侧right层的高度  
   var mh = Math.max(hl,hr); //比较hl与hr的高度,并将最大值赋给变量mh
   $(".itemleft").height(mh); //将left层高度设为最大高度mh  
   $(".itemright").height(mh); //将right层高度设为最大高度

 };
  setheight();
  $(window).resize(function(){  自动刷新
  setheight();
  });
   </script>



头部tab切换
$(".z_tab .z_tabtit li").mouseenter(function(){   
$(this).addClass("active").siblings().removeClass("active");
$(".tab-pane").eq($(this).index()).addClass("active").siblings().removeClass("active");
});


//首页头部导航过度
$(window).scroll(function(){    //浏览器窗口滚动条
if($(this).scrollTop() == 0){   //如果滚动条垂直位置等于0
$(".m_headerbg").addClass("mm").removeClass("kk").removeClass("ww");
}
 else if($(this).scrollTop() <= 100){
    $(".m_headerbg").addClass("kk").removeClass("mm").removeClass("ww");
   } 
   else if($(this).scrollTop() <= 200){
$(".m_headerbg").addClass("ww").removeClass("kk").removeClass("mm");
}
else if($(this).scrollTop() >= 200){
$(".m_headerbg").addClass("ww");

 });

0 0
原创粉丝点击