前端资料整理

发表于   |   分类于   |  

常用资源

  1. 前端资源库
  2. 阿里巴巴矢量图标库
  3. BootCDN 稳定、快速、免费的前端开源项目 CDN 服务
  4. JS1k: The JavaScript code golfing competition
  5. javascript秘密花园
  6. css-tricks
  7. CSS 开发者指南
  8. css-flexbox
  9. 如何跟上前端开发的最新前沿
  10. FE-learning
  11. 资源收集
  12. 前端代码质量一站式解决方案
  13. Front-end-Developer-Questions

子元素浮动时无法撑开父元素

  • 使用 css 样式解决
    1
    2
    3
    4
    5
    6
    7
    .parent{
       overflow: hidden;
    }

    .child{
      float: left;
    }

div 遇顶吸顶效果

1
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$.fn.smartFloat = function () {
    var position = function (element) {
      var top = element.position().top, pos = element.css("position");
      $(window).scroll(function () {
        var scrolls = $(this).scrollTop();
        if (scrolls > top) {
          if (window.XMLHttpRequest) {
            element.css({
              position: "fixed",
              top: 0
            });
          } else {
            element.css({
              top: scrolls
            });
          }
        } else {
          element.css({
            position: pos,
            top: top
          });
        }
      });
    };
    return $(this).each(function () {
      position($(this));
    });
  };

$("#score_detail").smartFloat();

侧边拉出菜单效果，实现明细详情展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
function openDetail(name, time, collectType, multiple, multiRules, exType, useType, useRemark) {
	(function () {
		var parent = document.getElementById("content");
		while (parent.firstChild) {
			parent.removeChild(parent.firstChild);
		}

		var detail_name = document.createElement('h3');
		detail_name.setAttribute("class", "detail_name");
		detail_name.innerHTML = name;
		parent.insertBefore(detail_name, parent.lastChild);

		var detail_time = document.createElement('div');
		detail_time.innerHTML = "<h5>时间</h5><p>" + time + "</p>";
		parent.insertBefore(detail_time, parent.lastChild.nextSibling);

		if (multiple) {
			var exchange = document.createElement('div');
			exchange.innerHTML = "<h5>兑换</h5><p>" + multiRules + "</p>";
			parent.insertBefore(exchange, parent.lastChild.nextSibling);

		} else {
			var exchange = document.createElement('div');
			exchange.innerHTML = "<h5>兑换</h5><p>" + exType + "</p>";
			parent.insertBefore(exchange, parent.lastChild.nextSibling);

			var use = document.createElement('div');
			use.innerHTML = "<h5>使用方式</h5><p>" + useType + "</p>";
			parent.insertBefore(use, parent.lastChild.nextSibling);

			var remark = document.createElement('div');
			remark.innerHTML = "<h5>说明</h5><p>" + useRemark + "</p>";
			parent.insertBefore(remark, parent.lastChild.nextSibling);

		}
	})();

	var API = $("#detail").data("mmenu");
	API.open();
}

$(document).ready(function () {
	$("#detail").mmenu({
		"slidingSubmenus": false,
		"extensions": [
			"pagedim-black",
			"effect-menu-zoom",
			"effect-panels-zoom",
			"effect-listitems-slide",
			"multiline",
			"theme-white",
			"widescreen"
		],
		"offCanvas": {
			"position": "right",
			"zposition": "back"
		},
		"scrollBugFix": {
			"fix": true
		}
	});
});

前端（手机端）适配方案

  • 采用 javascrpipt 直接适配,代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
(function (doc, win) {
  var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
	  var clientWidth = docEl.clientWidth;
	  if (!clientWidth) return;
	  docEl.style.fontSize = 100 * (clientWidth / 750) / 3.4 + 'px';
	};
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

纯 css 实现边框效果

前端跨域 前端跨域请求原理及实践

参考资料

web app变革之rem

关于移动端 rem 布局的一些总结

（淘宝无限适配）手机端rem布局详解（转载非原创）

移动适配的几种方式

移动端适配方法合集

div随页面滚动遇顶固定的两种方法(智能浮动层)

flexboxpatterns