JavaScript8:实战案例

栏目: JavaScript · 发布时间: 5年前

内容简介:版权声明:本文为博主尹成联系QQ77025077,微信18510341407原创文章,欢迎转载侵权不究。 https://blog.csdn.net/yincheng01/article/details/84066766

版权声明:本文为博主尹成联系QQ77025077,微信18510341407原创文章,欢迎转载侵权不究。 https://blog.csdn.net/yincheng01/article/details/84066766

#1.for循环图片的应用

在页面上显示一个矩形,鼠标在这个矩形的某个地方划过,则在该位置以矩形的形式显示图片的一部分。

效果图:

JavaScript8:实战案例

鼠标滑过之后:

JavaScript8:实战案例
<!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个月份,鼠标在某个月份上划过,则显示该月的活动安排。

效果图:

JavaScript8:实战案例
<!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

JavaScript8:实战案例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Dive Into Python 3

Dive Into Python 3

Mark Pilgrim / Apress / 2009-11-6 / USD 44.99

Mark Pilgrim's Dive Into Python 3 is a hands-on guide to Python 3 (the latest version of the Python language) and its differences from Python 2. As in the original book, Dive Into Python, each chapter......一起来看看 《Dive Into Python 3》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具