标签存档: HTML - 第2页

用input-radio选择性切换不同品牌的地图

作者: 日期: 2017年6月7日 没有评论

        先看index.html文件的代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script src="js/jquery1.8.3.min.js" type="text/javascript"></script>
    <!-- <script src="js/ol.js" type="text/javascript"></script> -->
    <script src="js/ol-debug.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>Map Test</h2>
    <div id="map">
        <nav id="layers">
            <ul>
                <li><input type="radio" name="layer" value="mapquest"/>MapQuest OSM</li>
                <li><input type="radio" name="layer" value="bingmaps"/>Bing Maps</li>
                <li><input type="radio" name="layer" value="esri"/>ESRI Maps</li>
                <li><input type="radio" name="layer" value="stamen"/>Stamen</li>
            </ul>
        </nav>
</div>
  </body>
</html>

        在ul标签中加入mapquest bingmaps esri stamen.与index.html相应的CSS代码：

.map {
    position:absolute;
    height: 600px;
    width: 100%;
    border: 1px red solid; 
  }
#layers {
	position:absolute;
	z-index:2;
	background-color:rgba(0,60,136,0.7);
	color:#fff;
	padding:8x 12px;
	font-size:12px;
	right:25px;
	top:5px;
        border-radius:8px;	 
  }
#layers > ul{
	list-style:none;
}
#layers > ul > li{
	padding: 2px 15px 1px 2px;
	margin-left:-25px;
}

        给#layers中的li标签加载'change'事件：

	$("#layers input[type=radio]").live('change',function(){
		var layer = $(this).val();
		map.getLayers().getArray().forEach(function(e){
			var name = e.get('name');
			e.setVisible(name == layer);
		});		
	})

        如果从OSM切换到bingmaps，则需要申请一个调用bingmaps的key，bingmaps key的申请地址：://www.bingmapsportal.com，同样切换到baidumaps或googlemaps等等都需要相应的key。 

	var mapquest = new ol.layer.Tile({
		source: new ol.source.OSM(),
		visible:true,
		name:'mapquest'	
	});	
	var bingmaps = new ol.layer.Tile({
		source: new ol.source.BingMaps({
			key:'AmqG5Tq1jbzjo1jTHyUyYqtAwfVf1OotyTiZaCU-AmDskeVi56TTKJ010u9g4j7O',
			imagerySet:'AerialWithLabels'
		}),
		visible:false,
		name:'bingmaps'	
	});

        看效果地址(由于另外两幅地图没有申请key，所以暂时不可见)：地图切换

用OpenLayers实例化一幅地图

作者: 日期: 2017年6月7日 没有评论

        openlayers是一个非常大而复杂，强大和灵活的JS框架。
        在OpenLayers一个主要的概念就是Map，Map可以包含一些图层，这些图层可以是矢量的也可以使栅格的。
        每个图层的数据源可以是图片，也可以是kml文件等。当然Map也包含一些控件，主要是交互所用的，比如 平移 缩放，要素的选择等等。
        现在我们开始学习OpenLayers的使用。
        1.创建一个简单的电子地图应用。
        你要创建一个电子地图应用，首先要创建一个地图。本教程将引导你创建一个简单的电子地图应用。
        当然一些必要的基础知识是需要的，比如 HTML，CSS ，Javascript 等是要学习的，OpenLayers是主要是通过HTML和Javascript编写的，所以我们得有一个编辑器。
        这里我们使用EditPlus ，当然你可以选择更好的一些编辑器，他们会高亮显示语法和自动提示功能。
        2.我们首先下载openlayers的源码，下载地址：://github.com/openlayers/openlayers/releases/download/v4.1.1/v4.1.1-dist.zip，解压里面的内容。
        3.下面创建一个 空的index.html文件。

        写入如下代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script src="js/jquery1.8.3.min.js" type="text/javascript"></script>
    <!-- <script src="js/ol.js" type="text/javascript"></script> -->
<script src="js/ol-debug.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>Map Test</h2>
    <div id="map"></div>
  </body>
</html>

        4.在index.html目录下创建一个css和js文件夹，分别放入ol.css、ol.js和ol-debug.js和jquery.js,在css目录中另外创建main.css以及在js文件下创建main.js。用文本编辑器分别打开main.css和main.js，在main.css写入：

.map {
	position:absolute;
    height: 600px;
    width: 100%;
	border: 1px red solid; 
  }

        以及在main.js中写入:

$(function(){	 
	var view = new ol.View({
		center: ol.proj.fromLonLat([114.42, 30.52]),
		zoom: 9,
		maxZoom:18,
		minzoom:2
	});	
	
	var mapquest = new ol.layer.Tile({
		source: new ol.source.OSM(),
		visible:true,
		name:'mapquest'	
	});		
	var map = new ol.Map({
			target: 'map',
			controls:ol.control.defaults().extend([
				new ol.control.ScaleLine(),
				new ol.control.ZoomSlider()
			]),
			layers: [mapquest],
			view: view
		  });		  	  		  
})

        5.用浏览器打开index.html，就可以看到刚才创建的地图了。

将随机选取的utf8转成汉字雨

作者: 日期: 2017年6月2日 没有评论

不废话，上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>将随机选取的utf8转成汉字雨</title>
	</head>
	<body>
		<canvas id="c"></canvas>
		<script>
			var c=document.getElementById("c");
			var	ctx=c.getContext("2d");
				c.width=window.innerWidth;
				c.height=window.innerHeight;
			//ctx.fillRect(0,0,100,100);
			//a,b,c,d分别代表x方向偏移,y方向偏移,宽，高				
			//4e00~9fa5 or 19968~40869 随机长度 
			var char_code = '',start = 19968,end = 40869;
			var L = Math.random()*(end - start);
			for(var j = start;j <= (start+L);j++){				
				char_code += parseInt(j).toString(16)+" ";
			}
			//将随机选取的unicode字符串转化为汉字
			var string1 = toChinese(char_code);							
				string1.split("");
			var fontsize=16;
				columns=c.width/fontsize;
			var drop = [];
			for(var x=0;x<columns;x++)
			{
				drop[x]=0;
			}
		function drap(){
			ctx.fillStyle="rgba(0,0,0,0.07)";
			ctx.fillRect(0,0,c.width,c.height);
			ctx.fillStyle="#0F0";
			ctx.font=fontsize+"px arial";
			for(var i=0;i<drop.length;i++){
				var text1=string1[Math.floor(Math.random()*string1.length)];
				ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
				drop[i]++;
				//0.5%的几率掉落
				if(drop[i]*fontsize>c.height&&Math.random()>0.95){
					drop[i]=0;
				}
			}
		}						
		function toChinese(data)
		{
			if(data == '') return '请输入十六进制unicode';
			data = data.split(' ');
			var str ='';
			for(var i=0;i<data.length;i++)
			{
				str+=String.fromCharCode(parseInt(data[i],16).toString(10));
			}
			return str;
		}
				
		setInterval(drap,20);				
		</script>
	</body>
</html>

点击看效果 : 随机的汉字雨

JS放大缩略图并随鼠标移动

作者: 日期: 2017年5月22日 没有评论

CSS:

<style type="text/css">
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
.img_s{border:none;}
audio{width:250px;margin-top:7px;}
</style>

HTML:

<table class="result-tab" width="100%">
    <tr>
        <th>ID</th>                            
        <th>缩略图</th>                            
        <th>路径</th>                            
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img class="img_s" src="upload/2017/05/22/76411495433869.jpg" height='40' width='250' title="盛开的菊科植物"/>										
        </td>
        <td>
            upload/2017/05/22/76411495433869.jpg
        </td>																							
    </tr>
</table>    

JS:

$(function(){
	var x = 10;
	var y = 20;
	$("img.img_s").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"
						+ this.src 
						+"' alt='预览图' height='500' width='800'/>"
						+imgTitle+"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show(500);	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
		this.title = this.myTitle;
		$("#tooltip").remove();	 //移除
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})

效果图:://wp.cpxiang.tech/wp-content/uploads/2017/05/@XYCJINXCVH39QJD7_Hjpg-1.jpg

JS实现循环给元素绑定事件

作者: 日期: 2017年5月10日 没有评论

        作为一个前端开发者，如果想对一些元素循环绑定事件的时候总是出现各种问题，尤其是在对闭包没有熟练掌握的时候更是一头雾水。网上一查，果然好多初学者有这个困惑，既然这个问题总是出现，于是在我就总结了以下两个比较好理解的解决方案，分享给大家：（可能有更好的方式我没有发现，请各位分享）。

HTML代码:

<div class="textwidget">  
        <span  class="textwidget">第一个</span>  
        <span  class="textwidget">第二个</span>  
        <span  class="textwidget">第三个</span>  
</div>

JS代码:

window.onload = function()   
{               
      var  spans = document.getElementsByClassName("textwidget");
      for(var i = 1; i < spans.length; i++)   
      {  
        spans[i].count = i;  
        spans[i].onmouseover = function()   
        {          
                this.style['margin-top'] = '-145px';
                this.style.display='block';     
        }
        spans[i].onmouseout = function()   
        {          
                this.style['margin-top'] = '0px';
                this.style.display='none';     
        }     
      }   
}