JavaScript网页特效(一)

介绍常用js的字符串操作api ❤❤❤

js-api复习:  字符串操作

1.作用根据位置返回字符:   var str=123456

var char=str.charAt(3);     ->char=4

2.作用根据字符返回位置:  var str=123456

var index=str.indexof('3')  ->index=2

3.作用截取:slice函数(起始位置,[结束位置])  ;  结束位置可以不设置    

var str ="woshishuaige";

console.log(str.slice(2,6));  ->"shis"   (包头不包尾);

console.log(str.slice(2));  ->"shishuaige"   (直接到最后);
4.作用字符串截取:substr(起始位置,[结束位置])  ;可以不设置    
var str ="woshishuaige";

console.log(str.substr(2,6));  ->"shishu"   (包头不包尾);

console.log(str.substr(2));  ->"shishuaige"   (直接到最后);

介绍常用js的保留小数操作api ❤❤

1.通过 indexOf  返回小数点的位置     截取字符串
var str = "122340.12345";
alert(str.substr(0,str.indexOf('.')+3));  //122340.12 
2.先乘以100  取整  然后 除以100
alert(parseInt(str*100) /100);    //122340.12
3.保留 2位 小数 
alert(str.toFixed(2) );     //122340.12

介绍常用js的大小写转换操作api ❤❤

1. toUpperCase:转大写
2.toLowerCase:转小写
实例:var str="woshishuaige";
str.toUpperCase()  -> WOSHISHUAIGE;

缓动公式: leader = leader + (target - leader ) /10 ;

1   btn.onclick = function() {
2          setInterval(function(){
3              leader = leader + (target - leader )/10;
4              box.style.left = leader + "px";
5          },30)
6      }

offset家族 作用:可以获取元素的宽高,根据坐标设置效果 ;

属性 :

*1.offsetWidth:宽度 =真实宽度+边框+padding*
*2.offsetHeight:宽度 =真实高度+边框+padding*
使用:`document.getElementById(''xxx'').offsetWidth`
*3.offsetLeft:距离(上一个定位的父级)的左区间值,如果父级没有定位,以body为主,  距离=padding+宽度(边框不算)*
*3.offsetTop:道理同上*
使用:`document.getElementById(''xxx'').offsetLeft`

特效一:筋斗云跟随导航

one.gif

代码:

    
    
    



    
    

        
首页新闻
        
师资力量
        
活动策划
        
企业文化
        
招聘信息
        
公司简介
        
上海校区
        
广州校区
    

特效二:鼠标点击跟随

效果:

two.gif

    
    
    


![](img.jpg)

特效二:鼠标放大镜

效果:

three.gif

    
    
    



    
    

        ![](images/001.jpg)
        

    
    

        ![](images/0001.jpg)