1.17 JavaScript8：實戰案例

尹成發表於2018-11-09
JavaScript

.for迴圈圖片的應用

在頁面上顯示一個矩形，滑鼠在這個矩形的某個地方劃過，則在該位置以矩形的形式顯示圖片的一部分。 
效果圖： 

 滑鼠滑過之後： 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for迴圈圖片應用</title>
    <style type="text/css">
    body{margin:0;padding:0;background:#ccc;text-align:center;}
    #content{width:510px;height:510px;background:#ddd;margin:20px auto auto 15px;position: relative;z-index:2;}
    p{font-size:18px;}
    ul{list-style:none}
    li{width:50px;height:50px;background:#ccc;position: absolute;left:0;top:0;opacity:0;filter:alpha(opacity:0);}
    </style>
<script type="text/javascript">
    window.onload=function()
    {
        var str="";
        var j=0;
        var oDiv=document.getElementById("content");
        var oUl=oDiv.getElementsByTagName('ul')[0];
        var aLi=oUl.getElementsByTagName('li');
        for(var i=0;i<100;i++)
        {
            str+="<li></li>";
        }
        oUl.innerHTML=str;
        for(var i=0;i<aLi.length;i++)
        {   aLi[i].iNow=i;
            aLi[i].style.left=((i%10)*51)+"px";
            aLi[i].style.opacity=0;

            if(i%10==0)
            {
                ++j;
            }
            aLi[i].style.top=((j-1)*51)+"px";
            aLi[i].style.background="url(images/MM.jpg)";
            aLi[i].style.backgroundPosition=(-(i%10)*51)+"px"+" "+(-(j-1)*51)+"px";
            aLi[i].onmouseover=function()
            {
                aLi[this.iNow].style.filter='alpha(opacity:'+100+')';
                aLi[this.iNow].style.opacity=1;
            }
        }
    }
</script>
</head>
<body>
<div id="content">
    <ul></ul>
</div>
<p>滑鼠滑過塊來檢視效果->相容瀏覽器:IE6-8,FireFox,Chrome,Opera,搜狗,世界之窗,傲遊</p>
</body>
</html>

 2.日曆

在頁面上顯示12個月份，滑鼠在某個月份上劃過，則顯示該月的活動安排。 
效果圖： 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS簡易日曆</title>
    <style type="text/css">
        body,h1,h2,p,ul,li{margin:0;padding:0;}
        body{font-size:12px;text-align:center;font-family:"幼圓";background:#31322C;}
        h1,h2{font-weight:normal;}
        em{font-style:normal;}
        ul{list-style-type:none;}
        /*動畫部分*/
        @-webkit-keyframes changeShadow{
            0%{
                -webkit-box-shadow:0 0 0 #000;
            }
            25%{
                -webkit-box-shadow:0 0 10px #282828;
            }
            50%{
                -webkit-box-shadow:0 0 15px #5D5D5D;
            }
            100%{
                -webkit-box-shadow:0 0 22px #FFF;
            }
        }
        #calender{
            width:240px;
            height:453px;
            background-image:-webkit-linear-gradient(0deg,#EFF3A3,#F0F0EE);
            background-image:-moz-linear-gradient(0deg,#EFF3A3,#F0F0EE);
            -webkit-box-shadow:0 0 20px #FFF; 
            -webkit-animation:changeShadow 1s ease-in infinite alternate;
            -moz-box-shadow:0 0 20px #FFFF;
            box-shadow:0 0 20px #FFF;
            margin:20px auto 0 auto;
        }
        #calender h1{
            padding:5px 0;
            font-size:16px;
            font-weight:bold;
        }
        #calender em{
                color:#f00;
        }
        #calender li{
            float: left;
            width:60px;
            height:60px;
            margin:10px;
            _display:inline;
            font-size:16px;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-transition:background .5s,color .5s ;
            color:#fff;
            cursor:pointer;
            line-height:30px;
            background:#1E1E1A;
        }
        #activity_content{
            clear:both;
            width:210px;
            height:80px;
            margin:0 10px;
            padding:12px 0 0 10px;
            background:#636556;
        }
        #activity_content h2{
            text-align:left;
            font-size:18px;
            font-weight:bold;
        }

        .active{
            border:2px solid #F90000;
            color:#f00!important;
            background:#fff!important;
            font-weight:bold;
        }
    </style>
<script>
    window.onload=function(){
        var oDiv1=document.getElementById("calender");
        var aLi=oDiv1.getElementsByTagName('li');
        var oDiv2=document.getElementById("activity_content");
        var arrText=["和朋友出去打籃球","和朋友出去唱K",
                     "和朋友出去逛街","慶祝專案酒會",
                     "在家歇著","在家看電影",
                     "去網咖打遊戲","和朋友去檯球館打檯球",
                     "和朋友去爬山","參加前端面試",
                     "在家歇著","出去旅遊"
                     ]

        for(var i=0;i<aLi.length;i++)
        {
            aLi[i].iNow=i;
            aLi[i].onmouseover=function()
            {
                for(var i=0;i<aLi.length;i++)
                {
                    aLi[i].className="";
                }
                aLi[this.iNow].className="active";
                oDiv2.innerHTML="<h2>"+(1+this.iNow)+"月活動"+"</h2><br/><strong style='color:#ff0'>"+arrText[this.iNow]+"</strong>"
            }
        }
    }
</script>
</head>
<body>
    <div id="calender">
        <h1><em>★</em> 活動計劃 <em>★</em></h1>
        <ul>
            <li><h2>1</h2><span>JAN</span></li>
            <li><h2>2</h2><span>FEB</span></li>
            <li><h2>3</h2><span>MAR</span></li>
            <li><h2>4</h2><span>APR</span></li>
            <li><h2>5</h2><span>MAY</span></li>
            <li><h2>6</h2><span>JUN</span></li>
            <li><h2>7</h2><span>JUL</span></li>
            <li><h2>8</h2><span>AUG</span></li>
            <li><h2>9</h2><span>SEP</span></li>
            <li><h2>10</h2><span>OCT</span></li>
            <li><h2>11</h2><span>NOV</span></li>
            <li><h2>12</h2><span>DEC</span></li>
        </ul>
        <div id="activity_content"></div>
    </div>
</body>
</html>

 

 

相關文章