一.include指令标记

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

微信小程序被给予的能量是无穷的，在小程序发展逐渐成熟的当下，小程序开发能实现的需求越来越完善。最近小程序中有一个图片旋转的需求，在微信小程序上是可以通过切换多张图片达到旋转的效果，但微信小程序自带的API中带有这么一个动画组件，因此小程序制作旋转动画可以使用image+Animation来实现。

首先在wxml中定义image

注意其中的animation属性，image就由它来实现动画。

而{{animation}}我们在js的data中定义

data: {

animation: \'\'

},

相关代码

var _animation;

var _animationIndex

const _ANIMATION_TIME = 500;

pages {

...

onShow: function () {

_animation =wx.createAnimation({

duration:_ANIMATION_TIME,

timingFunction: \'linear\',//linear,ease,ease-in,ease-in-out,ease-out,step-start,step-end

delay: 0,

transformOrigin:\'50% 50% 0\'

})

},

/**

* 实现image旋转动画，每次旋转 120*n度

*/

rotateAni: function (n){

_animation.rotate(120* (n)).step()

this.setData({

animation:_animation.export()

})

},

/**

* 开始旋转

*/

startAnimationInterval:function () {

var that = this;

that.rotateAni(++_loadImagePathIndex); // 进行一次旋转

_animationIntervalId =setInterval(function () {

that.rotateAni(++_loadImagePathIndex);

}, _ANIMATION_TIME); // 没间隔_ANIMATION_TIME进行一次旋转

},

/**

* 停止旋转

*/

stopAnimationInterval:function () {

if (_animationIntervalId> 0) {

clearInterval(_animationIntervalId);

_animationIntervalId= 0;

}

},

}

微信自带的Animation可以实现一次动画，然后可以通过setInterval来达到不断旋转的目的，在使用时，控制startAnimationInterval和stopAnimationInterval即可。

微信小程序视频教程，尽在即速学院。

在使用animation时，会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空，这都是由于rotate的值设置有问题。

1、rotate的值应该是上一次结束时的值，

2、如果设置了全局变量，记得在oncreate时初始化，不然第二次打开同一页面会有问题。

注意事项：

这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值，原因有两点：

1、我们需要便利的控制开始和停止，

2、animation在小程序进入后台后，会持续运行，占用手机内存和cpu，而小程序依赖于微信，在iphone上会导致微信被终止运行

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(4586)

142018-5

css布局——flex布局

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里、

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex;}
行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}
Webkit 内核的浏览器display: -webkit-flex;
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

容器属性：

flex-direction：（排列方向横向还是纵向） row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap：（如何换行）nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
flex-flow：（flex-direction和flex-wrap简称，默认值为row nowrap）justify-content：（横向对齐方式）
flex-start（默认值）：左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items：（纵向对齐方式）
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content：（多根轴线的对齐方式）flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴。

box属性：

order：（排列顺序）
数值越小，排列越靠前，默认为0。

flex-grow：（剩余空间分配，box放大比例，默认为0，即如果存在剩余空间，也不放大）

flex-shrink：（box缩小比例，默认为1，即如果空间不足，该项目将缩小）

flex-basis：（box占据的宽度或高度）

align-self：（单个box的对齐方式，与其他box对齐方式）

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3330)

142018-5

谈谈BFC

一、什么是BFC
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

二、如何触发 BFC

上面介绍了 BFC 的定义，那么如何触发 BFC 呢？
满足下面任一条件的元素，会触发为 BFC ：
1、浮动元素，float 除 none 以外的值
2、绝对定位元素，position（absolute，fixed）
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、BFC布局与普通文档流布局区别
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠

BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC）

4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

   下面来说一下BFC的实际使用场景
   场景1：解决子盒子都浮动时父盒子高度不参与计算问题
<style>
.far {
   border: 10px solid pink;
   width: 300px;
   }
.child {
   border: 10px solid yellowgreen;
   width:100px;
   height: 100px;
   float: left;
}
   .far{
   overflow: hidden;
}
</style>
<body>
<div class="far">
   <div class="child"></div>
   <div class="child"></div>
</div>
</body>

根据overflow 除了 visible 以外的值（hidden，auto，scroll）就会触发BFC的原则计算BFC高度时，floatbox也参与其中。

场景2：box垂直方向的距离会由margin来决定相邻两个盒子之间margin会重叠，这就是margin上下间值合并的原因

要解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了,解决代码如下。
<style>
   .box {
overflow: hidden;
   }
   p {
background: green;
width: 200px;
height: 200px;
margin: 100px;
}
</style>
<body>
   <p></p>
   <div class="box">
   <p></p>
   </div>

</body>

场景3：实现左侧固定右侧自适应等类似布局
<style>
      .out{
         border: 1px solid red;
         height: 200px;
      }
      .left{
         width: 200px;
         height: 150px;
         background-color: green;
         float: left;
      }
      .right{
         background-color: pink;
         height: 250px;
         overflow: hidden;
      }
</style>
<body>
   <div class="out">
<div class="left"></div>
<div class="right"></div>
</div>

评论(0) 浏览(3791)

112018-5

使用three.js的着色器通道渲染地球模型

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

我们都知道，three.js库里面内置了很多着色器通道对象供我们渲染场景，本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现：

1.RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建：

[javascript] view plain copy

let renderPass = new THREE.RenderPass(scene, camera);

2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果，实现的效果超有时代感，新建：

[javascript] view plain copy

/*四个参数分别为粗糙程度，扫描线强度，扫描线数量，是否转换为灰度图*/

let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);

//将渲染结果输出到屏幕

effectFilm.renderToScreen = true;

3.EffectComposer可以理解为着色器通道容器，着色器通道按照先后顺序添加进来并执行，新建：

[javascript] view plain copy

/*渲染效果组合器，每个通道都按照传入的顺序执行*/

let composer = new THREE.EffectComposer(renderer);

composer.addPass(renderPass);

composer.addPass(effectFilm);

本文实现的demo基于three.js_r86(请自行下载)，代码所用js文件和图片都在下载的那个包里面，请读者自行引用。

实现效果：

代码：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>shader_2_earth</title>

    <style>

        body{

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<script src="build/three.js"></script>

<script src="js/libs/stats.min.js"></script>

<script src="js/libs/dat.gui.min.js"></script>

<script src="js/controls/OrbitControls.js"></script>

<script src="js/Detector.js"></script>



<script src="js/postprocessing/EffectComposer.js"></script>

<script src="js/postprocessing/ShaderPass.js"></script>

<script src="js/postprocessing/MaskPass.js"></script>

<script src="js/postprocessing/FilmPass.js"></script>

<script src="js/postprocessing/BloomPass.js"></script>

<script src="js/postprocessing/RenderPass.js"></script>



<script src="js/shaders/CopyShader.js"></script>

<script src="js/shaders/FilmShader.js"></script>



<div id="stats"></div>

<div id="container"></div>

<script>

    //检测webgl的兼容性

   if(!Detector.webgl) Detector.addGetWebGLMessage();



   let scene;

   let camera, renderer, sphere, controls, stats;

   let ambientLight, spotLight;

   let composer;

   let clock;



   main();

   render();



   function main() {

       scene = new THREE.Scene();



       camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);

       camera.position.set(-10, 15, 25);

       camera.lookAt(new THREE.Vector3(0, 0, 0));



       renderer = new THREE.WebGLRenderer({antialias:true});

       renderer.setClearColor(new THREE.Color(0,0,0));

       renderer.setSize(window.innerWidth, window.innerHeight);

       renderer.shadowMapEnabled = true;



       controls = new THREE.OrbitControls(camera);

       controls.autoRotate = false;



       clock = new THREE.Clock();



       ambientLight = new THREE.AmbientLight(0x181818);

       scene.add(ambientLight);



       spotLight = new THREE.SpotLight(0xffffff);

       spotLight.position.set(550, 100, 550);

       spotLight.intensity = 0.6;

       scene.add(spotLight);



       //创建地球

       sphere = createMesh(new THREE.SphereGeometry(10, 60, 60));

       scene.add(sphere);



       document.getElementById("container").appendChild(renderer.domElement);



       /**

        * 添加渲染通道

        */

       //在当前场景和摄像机的基础上渲染一个新场景

       let renderPass = new THREE.RenderPass(scene, camera);

       //通过扫描线和失真来实现模拟电视屏幕的效果

       let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);

       //将渲染结果输出到屏幕

       effectFilm.renderToScreen = true;



       //渲染效果组合器，每个通道都按照传入的顺序执行

       composer = new THREE.EffectComposer(renderer);

       composer.addPass(renderPass);

       composer.addPass(effectFilm);



       //菜单栏元素

       let guiFields = {

           "扫描线数量": 256,

           "灰度图像": false,

           "扫描线强度": 0.3,

           "粗糙程度": 0.8,

           "updateEffectFilm": function () {

               effectFilm.uniforms.grayscale.value = guiFields.灰度图像;

               effectFilm.uniforms.nIntensity.value = guiFields.粗糙程度;

               effectFilm.uniforms.sIntensity.value = guiFields.扫描线强度;

               effectFilm.uniforms.sCount.value = guiFields.扫描线数量;

           }

       };



       //新建一个菜单栏

       let gui = new dat.GUI();

       gui.add(guiFields, "扫描线数量", 0, 2048).onChange(guiFields.updateEffectFilm);

       gui.add(guiFields, "扫描线强度", 0, 1).onChange(guiFields.updateEffectFilm);

       gui.add(guiFields, "粗糙程度", 0, 3).onChange(guiFields.updateEffectFilm);

       gui.add(guiFields, "灰度图像").onChange(guiFields.updateEffectFilm);



       stats = initStats();

   }



   //创建一个Mesh

   function createMesh(geometry) {



       //初始化纹理加载器

       let textureLoader = new THREE.TextureLoader();

       //加载图片

       let uniforms = {

           planetTexture:{value:textureLoader.load("textures/planets/earth_atmos_2048.jpg")},

           specularTexture:{value:textureLoader.load("textures/planets/earth_specular_2048.jpg")},

           normalTexture:{value:textureLoader.load("textures/planets/earth_normal_2048.jpg")}

       };



       //创建phong材料，并进行相应图片的贴图

       let planetMaterial = new THREE.MeshPhongMaterial();

       planetMaterial.specularMap = uniforms.specularTexture.value;

       planetMaterial.specular = new THREE.Color(0x4444aa);



       planetMaterial.normalMap = uniforms.normalTexture.value;

       planetMaterial.map = uniforms.planetTexture.value;



       //新建一个mesh

       let mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [planetMaterial]);



       return mesh;

   }



   //渲染更新场景



   function render() {

       stats.update();

       let delta = clock.getDelta();

       controls.update(delta);

       sphere.rotation.y += 0.002;

       requestAnimationFrame(render);



       //没有着色器通道系统默认为WebGLRenderer.render

       //使用着色器通道后，应使用使用composer.render

       composer.render(delta);

   }



   //左上角帧显示

   function initStats() {

       let stats = new Stats();

       stats.setMode(0);

       stats.domElement.style.position = 'absolute';

       stats.domElement.style.left = '0px';

       stats.domElement.style.top = '0px';

       document.getElementById("stats").appendChild(stats.domElement);



       return stats;

   }

</script>

</body>

</html>

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(5138)

112018-5

8个非常个性化的CSS3单/复选框

单选框和复选框在网页表单中应用十分广泛，但是浏览器默认自带的单选框和复选框样式不仅不统一，而且大多都比较简单丑陋。本文给大家介绍了一些基于CSS3的个性化单选框和复选框，一些选中动画是基于jQuery的，你可以挑选喜欢的单选框和复选框应用到自己的网页中去，非常方便。

1、jQuery超级个性化的单线框和复选框

今天要分享的也是一个非常个性化的单选框和复选框插件，颜色你可以自己定义。

2、CSS3漂亮的自定义Checkbox复选框 9款迷人样式

今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。

3、CSS3自定义美化复选框Checkbox组合

今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不错的CSS3自定义美化checkbox组合。

4、jQuery实现美化版的单选框和复选框

今天这款是利用jQuery实现的美化版单选框和复选框，样式风格非常简洁清爽，是一款很不错的jQuery按钮插件。

5、纯CSS3 3D按钮按钮酷似牛奶般剔透

CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。

6、HTML5/CSS3开关按钮立体3D按钮

今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。

在下演示源码下载

7、CSS3自定义发光Radiobox单选框

今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件，该radiobox选中时也有滑块的动画。

8、CSS3实现自定义Checkbox动画

今天我们要再来分享一款CSS3自定义checkbox，而且这款checkbox还带有动画效果，当你选中checkbox的时候，会以动画的方式打上一个大大的勾。

以上就是8个非常个性化的CSS3单/复选框，希望对你有所帮助。

本文链接：http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html

评论(0) 浏览(3656)

102018-5

include指令标记与动作标记详解

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

一.include指令标记

include指令标记用于把JSP文件，HTML网文文件等文件静态嵌入当前JSP网页中，语法如下:

[html] view plain copy

<%@include file="xxURL"%>

静态嵌入就是“先包含后处理”在编译阶段完成对文件嵌入，即先将当前JSP页面与被嵌入文件合并成一个新的JSP页面

eg：

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

</head>

<body>

        <font color="red"size=5>

            lalla

        </font>

</body>

</html>



[html] view plain copy

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>include动作标记</title>

</head>

<body>

    <br>

        <jsp:include page="demo.jsp"/>

    </br>

</body>

</html>

运行结果如下：

二.include动作标记：

动作标记是将JSP等文件动态嵌入当前JSP网页中，语法如下：

[html] view plain copy

<jsp:include page="xxURL"/>

[html] view plain copy

<jsp:include page="xxURL">

   子标记

<jsp:include/>

动态嵌入就是“先处理后包含”在运行阶段完成对文件嵌入，即在把JSP页面转译为JAVA文件时，并不合并两个页面。

eg：

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

</head>

<body>

        <font color="red"size=5>

            lalla

        </font>

</body>

</html>

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>include动作标记</title>

</head>

<body>

    <br>

        <jsp:include page="demo.jsp"/>

    </br>

</body>

</html>

运行结果：

总结：静态嵌入中嵌入页面与原页面合并了，动态嵌入则还没有。

动态嵌入与静态嵌入相比较，动态嵌入执行速度稍慢，但是灵活性较高。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(4313)

102018-5

20个最常用的javascript方法函数收集

收集了一些比较常用的JavaScript函数。

1、字符串长度截取函数

function cutstr(str,len){

var temp,icount = 0,patrn = /[^x00-\xff]/,strre=" ";

for(var i= 0;i<str.length;i++) {

if (icount<len-1){

temp =str.substr(i,1);

if (patrn.exec(temp)==null){

icount =icount+1

}else {

icount =icount+2

}

strre+=temp

} else {

break;

}

returen strre+"...";

}

2、替换全部

String.prototype.replaceAll = function(s1,s2) {

return this.replace(new RegExp(s1,"gm"),s2);

}

3、清除空格

function trim = function() {

var reExtraSpace = /^\s*(.*?)\s+$/;

return this.replace(reExtraSpace,"$1");

}

4、清除左空格/右空格

function ltrim(s){

return s.replace(/^(\s*| *)/,"");

}

function rtrim(s) {

return s.replace(/(\s*| *)$/,"");

}

5、判断是否以某个字符串开头

String.prototype.startWith = function(s) {

return this.indexOf(s)==0;

}

6、判断是否以某个字符串结束

String.prototype.endWith = function(s) {

var d = this.length - s.length;

return (d >= 0 && this.lastIndexOf(s)==d);

}

7、转义HTML标签

function HtmlEncode(text) {

return text.replace(/&/g,'&').replace(/\"/g,' " ').replace(/</g,'<').replace(/>/g,'>');

}

8、时间日期格式转换

Date.prototype.Format = function(formatStr){

var str = formatStr;

var week =['日','一','二','三','四','五','六']；

str = str.replace(/yyyy|YYYY/,this.getFullYear());

str = str.replace(/yy|YY,(this.getYear()%100)>9?(this.getYear()%100).toString():'0'+(this.getYear()%100));

str = str.replace(/MM/,(this.getMonth()+1)>9?(this.getMonth()+1).toString():'0'+this.getMonth()+1));

str = str.replace(/w|W/g,week[(this.getDay()];

str = str.replace(/dd|DD/,(this.getDate()>9?this.getDate().toString():'0'+this.getDate());

str = str.replace(/d|D/g,this.getDate());

str = str.replace(/hh|HH/,this.getHours()>9?(this.getHours().toString():'0'+this.getHours());

str = str.replace(/h|H/g,this.getHours());

str = str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0'+this.getMinutes());

str = str.replace(/m/g,this.getMinutes());

str = str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0'+this.getgetSeconds());

str = str.replace(/s|S/g,this.getSeconds());

return str;

}

9、判断是否为数字类型

function isDigit (value){

var patrn = /^[0-9]*$/;

if (patrn.exec(value) == null || value=="" ) {

return false;

} else {

return true;

}

10、设置cookie

function setCookie(name,value,Hours){

var d =new Date();

var offset =8;

var utc = d.getTime()+(d.getTimezoneOffset()*60000);

var nd = utc+(3600000*offset);

var exp = new Date(nd);

exp.setTime(exp.getTime()+Hours*60*60*1000);

document.cookie = name+"="+escape(value)+";domain=360doc.com;"

}

获取cookie值

function getCookie(name){

var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

if (arr!=null){

return unescape(arr[2]);

}else {

return null;

}

11、加入收藏夹

function AddFavorite(sURL,sTitle) {

try{

window.external.addFavorite(sURL,sTitle);

}catch(e){

try{

window.sidebar.addPanel(sTitle,sURL,"");

}catch(e){

alert("加入收藏夹失败，请使用Ctrl+D进行添加");

}

12、设为首页

function setHomepage(){

if(document.all){

document.body.style.behavior='url(#default#homepage)';

document.body.setHomePage('http://w3cboy.com')

}else if (window.sidebar){

if(window.netscape){

try{

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")

}catch(e){

alert("该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入about:config，然后将

项 signed.applets.codebase_principal_support 值该为true");

}

var prefs = Components.classes['@mozilla.org/preferences- service;1'].getService(Components.interfaces.nsIPrefBranch);

prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com');

}

13、加载样式文件

function LoadStyle(url) {

try {

document.createStyleSheet(url);

}

catch(e) {

var cssLink = document.createElement('link');

cssLink.rel = 'stylesheet';

cssLink.type = 'text/css';

cssLink.href = url;

var head = document.getElementsByTagName('head')[0];

head.appendChild(cssLink);

}

14、返回脚本内容

function evalscript(s) {

if(s.indexOf('<script') == -1) return s;

var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;

var arr = [];

while(arr = p.exec(s)) {

var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;

var arr1 = [];

arr1 = p1.exec(arr[0]);

if(arr1) {

appendscript(arr1[1], '', arr1[2], arr1[3]);

} else {

p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;

arr1 = p1.exec(arr[0]);

appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);

}

return s;

}

15、清除脚本内容

function stripscript(s) {

return s.replace(/<script.*?>.*?<\/script>/ig, '');

}

16、动态加载脚本文件

function appendscript(src, text, reload, charset) {

var id = hash(src + text);

if(!reload && in_array(id, evalscripts)) return;

if(reload && $(id)) { $(id).parentNode.removeChild($(id));
}

evalscripts.push(id);

var scriptNode = document.createElement("script");

scriptNode.type = "text/javascript";

scriptNode.id = id;

scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);

try {

if(src) {

scriptNode.src = src;

scriptNode.onloadDone = false;

scriptNode.onload = function () {

scriptNode.onloadDone = true;

JSLOADED[src] = 1;

};

scriptNode.onreadystatechange = function () {

if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {

scriptNode.onloadDone = true; JSLOADED[src] = 1;

}

};

} else if(text){

scriptNode.text = text;

}

document.getElementsByTagName('head')[0].appendChild(scriptNode);

} catch(e) {}

}

17、返回按ID检索的元素对象
function $(id) {

return !id ? null : document.getElementById(id);

}

18、跨浏览器绑定事件

function addEventSamp(obj,evt,fn){

if(!oTarget){

return;

} if (obj.addEventListener) {

obj.addEventListener(evt, fn, false);

}else if(obj.attachEvent){

obj.attachEvent('on'+evt,fn);

}else{

oTarget["on" + sEvtType] = fn;

}

19、跨浏览器删除事件

function delEvt(obj,evt,fn){ if(!obj){

return;

} if(obj.addEventListener){

obj.addEventListener(evt,fn,false);

}else if(oTarget.attachEvent){

obj.attachEvent("on" + evt,fn);

}else{

obj["on" + evt] = fn;

}

20、元素添加on方法

Element.prototype.on = Element.prototype.addEventListener;

NodeList.prototype.on = function (event, fn) {、

[]['forEach'].call(this, function (el) {

el.on(event, fn);

});

return this;

};

评论(0) 浏览(3342)

092018-5

px、em、rem、%、vw、vh、vm这些单位的区别

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

1.背景介绍

我们为什么要选择合适的网页设计单位

随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。

网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。

现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。

所以需要我们选择合适的单位来进行开发，设计。
2.知识剖析

1、px

px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。

特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。

2、em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
3、rem

rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。

4、%

一般来说就是相对于父元素的，

1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口），
5、vw

css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

7、vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

兼容性太差，现在基本上没人用，我试了一下Chrome就用不了。

3.常见问题

假如使用em来设置文字大小要注意什么？

4.解决方案

注意父元素的字体大小，因为em是根据父元素的大小来设置的。比如同样是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.

特别是在多重div嵌套里面更要注意。

5.扩展思考

css还有哪些长度单位？

in:寸

cm:厘米

mm:毫米

t:point，大约1/72寸

pc:pica，大约6pt，1/6寸

6.更多问题
1.pc pt ch一般用在什么场景?
这些我们网页设计基本上用不到，在排版上会有用处。

2.如何使 1rem=10px
在设置HTML{font-size：62.5%；}即可

3.如果父元素没有指定高度，那么子元素的百分比的高度是多少？
会按照子元素的实际高度，设置百分比已经没有效果了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3526)

092018-5

一份最详尽全面的UI界面切图命名规范