标签存档: CSS

上传图预览

作者: 日期: 2018年6月14日 没有评论

HTML部分

<img id="pscover" src="__PUBLIC__/Home/images/z_70.jpg" alt="" />
<input type="file" name="scover" id="scover" />
<img id="pqr" src="__PUBLIC__/Home/images/z_70.jpg" alt="" />
<input type="file" name="qr" id="qr"/>

JS部分(注意引入jQ)

window.onload = function(){
	var arr = new Array();
	arr["img[id='pscover']"] = "input[name='scover']";
	arr["img[id='pqr']"] = "input[name='qr']";
	for(var i in arr){
		void function(i){
			$(arr[i]).on("change",function(){
		 		var pic = this.files[0];
		 		pic_preview(pic,i);
			})		
		}(i)	 	
	}
	function pic_preview(pic,obj){
		var f = new FileReader();
		f.readAsDataURL(pic);
		f.onload = function (e){
			$(obj).attr("src",this.result).show();
		}
	}	
}

jQuery 元素选择器

作者: 日期: 2018年4月13日 1 条评论

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

更多实例

语法 描述 实例
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素 在线实例

用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>

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