Sun ufologist

我的目标是成为一个热爱互联网, 善用互联网, 既懂产品又懂技术的前端架构师

ufologist / understand-require.js

Created December 27, 2013 06:55

理解RequireJS中的模块

	/**
	* 理解RequireJS中的模块
	* ================================
	* 重点在于介绍RequireJS模块定义/运作/使用的基本原理, 不考虑依赖管理即其他方面的问题.
	* 看看define和require到底做了些什么.
	*
	* @author Sun
	* @version 2013-12-27
	*/

ufologist / baidu-map-quick-custom-overlay.html

Created March 3, 2014 14:59

百度地图 JavaScript API 极速版自定义覆盖物

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>百度地图 JavaScript API 极速版自定义覆盖物</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
	<style>
	body,
	html,
	#mapdemo {

ufologist / css-transform-stacking-context.html

Created April 4, 2014 07:16

CSS3 Transform create new stacking context

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>CSS3 Transform create new stacking context</title>
     <style>
     .transform-el,
     .bottom-el {
         position: absolute;
         height: 120px;

ufologist / baidu-map-quick-draggable-marker.html

Created April 16, 2014 08:00

百度地图 JavaScript API 极速版可拖拽的标注点

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>百度地图 JavaScript API 极速版可拖拽的标注点</title>
	<style>
	.map {
	width: 500px;
	height: 300px;
	}

ufologist / baidu-map-quick-animation-marker.html

Created April 16, 2014 08:47

百度地图 JavaScript API 极速版带动画的标注点

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>百度地图 JavaScript API 极速版带动画的标注点</title>
	<style>
	.map {
	width: 500px;
	height: 300px;
	}

ufologist / baidu-map-click-offset.html

Created September 3, 2014 08:12

修正百度地图pinch zoom in后的偏移

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>修正百度地图pinch zoom in后的偏移</title>
	<style>
	html,
	body,
	#allmap {
	width: 100%;

ufologist / touchend-doesnot-fire.html

Created September 19, 2014 07:42

fixbug: touchend doesn't fire on mobile devices

	<!DOCTYPE html>
	<html>
	<head>
	<title>touchend doesn't fire on mobile devices</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<style>
	body {
	background-color: #eee;
	}

ufologist / ios6-viewport-scale-bug-fix.html

Last active November 11, 2015 08:10

Fix iPhone4/iOS6 browser viewport appear black or white area bug!!

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Fix iPhone4/iOS6 browser viewport appear black or white area bug!!</title>
	<!--
	关键是要注意在初始化页面时设置 viewport width=320.1, 非常之诡异!

	PS: 在查了N多资料, N多尝试后发现, 其实只要不将width设置成320或device-width即可, 其他任何数字都可以! 不设置width这个属性也可以!

ufologist / svg-innerhtml-workaround.html

Created August 26, 2015 04:46

svg.innerHTML workaround

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>svg.innerHTML workaround</title>
	</head>
	<body>
	<div>
	<button onclick="innerHTMLNormal()">svg.innerHTML</button>

ufologist / svg-clippath-dynamically.html

Created October 22, 2015 02:19

Define SVG clipPath dynamically

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Define SVG clipPath dynamically</title>
	</head>
	<body>
	<h1>Define SVG clipPath dynamically</h1>
	<!--
	<h2>Preview static</h2>