JavaScript網(wǎng)頁特效(一)

介紹常用js的字符串操作api ???

js-api復(fù)習(xí):  字符串操作

1.作用根據(jù)位置返回字符:   var str=123456

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

2.作用根據(jù)字符返回位置:  var str=123456

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

3.作用截取:slice函數(shù)(起始位置,[結(jié)束位置])  ;  結(jié)束位置可以不設(shè)置    

var str ="woshishuaige";

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

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

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

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

介紹常用js的保留小數(shù)操作api ??

1.通過 indexOf  返回小數(shù)點(diǎn)的位置     截取字符串
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位 小數(shù) 
alert(str.toFixed(2) );     //122340.12

介紹常用js的大小寫轉(zhuǎn)換操作api ??

1. toUpperCase:轉(zhuǎn)大寫
2.toLowerCase:轉(zhuǎn)小寫
實(shí)例:var str="woshishuaige";
str.toUpperCase()  -> WOSHISHUAIGE;

緩動(dòng)公式: 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家族 作用:可以獲取元素的寬高,根據(jù)坐標(biāo)設(shè)置效果 ;

屬性 :

*1.offsetWidth:寬度 =真實(shí)寬度+邊框+padding*
*2.offsetHeight:寬度 =真實(shí)高度+邊框+padding*
使用:`document.getElementById(''xxx'').offsetWidth`
*3.offsetLeft:距離(上一個(gè)定位的父級(jí))的左區(qū)間值,如果父級(jí)沒有定位,以body為主,  距離=padding+寬度(邊框不算)*
*3.offsetTop:道理同上*
使用:`document.getElementById(''xxx'').offsetLeft`

特效一:筋斗云跟隨導(dǎo)航

one.gif

代碼:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0; padding: 0;}
        ul {list-style:none;}
        body {
            background-color: #000;
        }
        .nav {
            width: 800px;
            height: 42px;
            background:url("images/rss.png") no-repeat right center #fff;
            margin: 100px auto;
            border-radius: 5px;
            position: relative; 
        }
        .cloud {
            width: 83px;
            height: 42px;
            position: absolute;
            top: 0;
            left: 0;
            background: url(images/cloud.gif) no-repeat;
        }
        .nav ul {
            position: absolute;
            top: 0;
            left: 0;
        }
        .nav li {
            float: left;
            width: 83px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #000;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="nav" id="nav">
    <span class="cloud" id="cloud"></span>
    <ul>
        <li>首頁新聞</li>
        <li>師資力量</li>
        <li>活動(dòng)策劃</li>
        <li>企業(yè)文化</li>
        <li>招聘信息</li>
        <li>公司簡(jiǎn)介</li>
        <li>上海校區(qū)</li>
        <li>廣州校區(qū)</li>
    </ul>
</div>
</body>
</html>
<script>
    var cloud  = document.getElementById("cloud");  // 云彩
    var nav = document.getElementById("nav");
    var lis = nav.children[1].children;
    var current = 0;   // 用于存放點(diǎn)擊時(shí)候的 offsetLeft
    //alert(lis.length);
    for(var i=0; i<lis.length;i++) {
        lis[i].onmouseover = function() {
            // alert(this.offsetLeft);
            target = this.offsetLeft;  // 把左側(cè)的位置 钱雷,給 target
        }
        lis[i].onmouseout = function() {
            target = current;     // 鼠標(biāo)離開  target 是 剛才我們點(diǎn)擊的位置
        }
        lis[i].onclick = function() {
           current = this.offsetLeft;   //  點(diǎn)擊的時(shí)候       吧當(dāng)前位置 存貯一下
        }
    }
    // 緩動(dòng)公式
    var leader = 0, target = 0;
    setInterval(function(){
        leader = leader + (target - leader ) / 10;
        cloud.style.left = leader + "px";
    },10);
</script>

特效二:鼠標(biāo)點(diǎn)擊跟隨

效果:

two.gif
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #image {
            width: 99px;
            position: absolute;
            top:0;
            left: 0;
        }
    </style>
</head>
<body>
![](img.jpg)
</body>
</html>
<script>
    var image = document.getElementById("image");
    document.onclick = function(event) {
        var event = event || window.event;
        targetX = event.clientX - image.offsetWidth /2;
        targetY = event.clientY - image.offsetHeight /2;
    }
    // 緩動(dòng)
    var     leaderX = 0,
            leaderY= 0,
            targetX = 0,
            targetY = 0;
    setInterval(function() {
        leaderX = leaderX + (targetX - leaderX) / 10;
        leaderY = leaderY + (targetY - leaderY) / 10;
        image.style.left = leaderX + "px";
        image.style.top = leaderY + "px";
     },10)
</script>

特效二:鼠標(biāo)放大鏡

效果:

three.gif
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        img {
            vertical-align: top;
        }
        .box {
            width: 350px;
            height: 350px;
            margin:100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .big {
            width: 450px;
            height: 450px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .small {
            position: relative;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box" id="fdj">
    <!--小盒子-->
    <div class="small">
        ![](images/001.jpg)
        <div class="mask"></div>
    </div>
    <div class="big">
        ![](images/0001.jpg)
    </div>
</div>
</body>
</html>
<script>
   var fdj = document.getElementById("fdj");  // 獲得最大的盒子
    var small = fdj.children[0];  // 獲得small 小圖片 350盒子
    var big = fdj.children[1];  // 獲得 大圖片 800 盒子
    var mask = small.children[1];  // 小的黃色盒子
   var bigImage = big.children[0]; // 大盒子里面的圖片
    small.onmouseover = function() {   // 鼠標(biāo)經(jīng)過顯示出他們
        mask.style.display = "block";
        big.style.display = "block";
    }
    small.onmouseout = function() {
        mask.style.display = "none";
        big.style.display = "none";
    }
    //  鼠標(biāo)在small 內(nèi)移動(dòng)
   var x = 0;
   var y = 0;
    small.onmousemove = function(event) {
        var event = event || window.event;
         x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;  // 再某個(gè)盒子內(nèi)的坐標(biāo)
         //alert(this.offsetLeft);
         y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
         if(x < 0)
         {
             x = 0;
         }
         else if(x > small.offsetWidth - mask.offsetWidth)
         {
             x = small.offsetWidth - mask.offsetWidth;
         }
         if(y<0)
         {
            y = 0;
         }
         else if(y > small.offsetHeight - mask.offsetHeight)
         {
             y = small.offsetHeight - mask.offsetHeight;
         }
         mask.style.left = x + "px";
         mask.style.top = y + "px";
         /*計(jì)算  :  夫子 一頓吃 2個(gè)饅頭    嬌子  一頓 4個(gè)饅頭
         問  夫子今天吃了 3個(gè)饅頭  嬌子應(yīng)該吃幾個(gè)?  */
         /*計(jì)算出他們的倍數(shù)   4 / 2    2倍
          3 * 2  == 6個(gè)  */
         /* 大圖盒子 /  小圖盒子  倍數(shù)
          我們 再小圖移動(dòng)的距離 *  倍數(shù)  ==  大圖的位置*/
         bigImage.style.left =  -x *  big.offsetWidth /small.offsetWidth + "px";
         bigImage.style.top =  -y *  big.offsetHeight /small.offsetHeight + "px";

    }
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末矗蕊,一起剝皮案震驚了整個(gè)濱河市失息,隨后出現(xiàn)的幾起案子呆瞻,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件镊屎,死亡現(xiàn)場(chǎng)離奇詭異宰睡,居然都是意外死亡蒲凶,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門拆内,熙熙樓的掌柜王于貴愁眉苦臉地迎上來旋圆,“玉大人,你說我怎么就攤上這事麸恍×榍桑” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵抹沪,是天一觀的道長刻肄。 經(jīng)常有香客問我,道長融欧,這世上最難降的妖魔是什么敏弃? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮蹬癌,結(jié)果婚禮上权她,老公的妹妹穿的比我還像新娘。我一直安慰自己逝薪,他們只是感情好隅要,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著董济,像睡著了一般步清。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上虏肾,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天廓啊,我揣著相機(jī)與錄音,去河邊找鬼封豪。 笑死谴轮,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的吹埠。 我是一名探鬼主播第步,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼疮装,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了粘都?” 一聲冷哼從身側(cè)響起廓推,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎翩隧,沒想到半個(gè)月后樊展,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡堆生,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年专缠,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片顽频。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡藤肢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出糯景,到底是詐尸還是另有隱情嘁圈,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布蟀淮,位于F島的核電站劫谅,受9級(jí)特大地震影響蔼紧,放射性物質(zhì)發(fā)生泄漏碍扔。R本人自食惡果不足惜轮傍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望策治。 院中可真熱鬧脓魏,春花似錦、人聲如沸通惫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽履腋。三九已至珊燎,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間遵湖,已是汗流浹背悔政。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留延旧,地道東北人谋国。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像迁沫,于是被迫代替她去往敵國和親芦瘾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子闷盔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容