JavaScript8:实战案例

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

内容简介:版权声明:本文为博主尹成联系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:实战案例

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

查看所有标签

猜你喜欢:

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

数字图像处理

数字图像处理

[美]冈萨雷斯、[美]伍兹 / 电子工业出版社 / 2010-1 / 79.80元

《数字图像处理(第3版)(英文版)》是数字图像处理经典著作,作者在对32个国家的134个院校和研究所的教师、学生及自学者进行广泛调查的基础上编写了第三版。除保留了第二版的大部分主要内容外,还根据收集的建议从13个方面进行了修订,新增400多幅图像、200多个图表和80多道习题,同时融入了近年来本科学领域的重要发展,使《数字图像处理(第3版)(英文版)》具有相当的特色与先进性。全书分为12章,包括绪......一起来看看 《数字图像处理》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

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

HEX HSV 互换工具