JavaScript8:實戰案例
#1.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>
學院Go語言視訊主頁
https://edu.csdn.net/lecturer/1928
清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群:721929980
相關文章
- 1.17 JavaScript8:實戰案例JavaScript
- WinDbg(3)實戰案例
- Sharding JDBC案例實戰JDBC
- 深度剖析Reflect + 實戰案例
- JQuery8:實戰案例jQuery
- Laravel —— 服務注入實戰案例Laravel
- 4-陣列-案例實戰陣列
- 基礎爬蟲案例實戰爬蟲
- 實戰SEO——實用技法與案例剖析
- ffmpeg實戰-音視訊合成案例
- vue2.0+Element-ui實戰案例VueUI
- 騰訊雲大資料實戰案例大資料
- Python實戰小案例,值得收藏!Python
- 線上最佳化之案例實戰
- 域名繫結動態IP實戰案例
- 線上業務最佳化之案例實戰
- Python實戰案例彙總,帶你輕鬆從入門到實戰Python
- ElasticSearch 億級資料檢索案例實戰Elasticsearch
- 智慧化生產應用搭建的實戰案例
- Elasticsearch學習系列三(搜尋案例實戰)Elasticsearch
- Python中insert用法及實戰案例!Python
- 實戰:vxfs fsck: unrecognized vxfs version number案例(轉)Zed
- 鴻蒙HarmonyOS實戰-工具安裝和Helloworld案例鴻蒙
- iOS 面向切面程式設計的實現與實戰案例iOS程式設計
- 《網路爬蟲開發實戰案例》筆記爬蟲筆記
- Linux tar打包命令詳解,附實戰案例!Linux
- Chrome 外掛特性及實戰場景案例分析Chrome
- 知識圖譜實戰開發案例剖析(1)
- nginx反向代理和負載均衡策略實戰案例Nginx負載
- 好程式設計師web前端分享js實現實戰案例程式設計師Web前端JS
- Flutter實戰】文字元件及五大案例Flutter字元元件
- 騰訊遊戲效能實戰案例分享之幀率陡變遊戲
- 小程式入門到實戰(二)--案例原始碼分享原始碼
- 機器學習 - 決策樹:技術全解與案例實戰機器學習
- 清華尹成帶你實戰GO案例(22)Go常量Go
- 清華尹成帶你實戰GO案例(28)Go 方法Go
- 清華尹成帶你實戰GO案例(35)Go 互斥Go
- 清華尹成帶你實戰GO案例(38)Go 介面Go