分类为 前端 的文章:
js获取本地即将上传文件的大小: <input type="file" onchange="fileChange(this);" /> <script type="text/javascript"> var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function fileChange(target) { var fileSize = 0; if (isIE && !target.files) { var filePath = target.value; var fileSystem = new ActiveXObject("...
2013/06/14 浏览数(6,935) 分类(Javascript)
提到图片,我们不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时,可以看见赖以构成整个图像的无数单个方块。 常见的格式中JPG、PNG、GIF亦属于位图,所以它们的数据结构大致相同,只是每一种图片格式都有不同的压缩算法,不同的扫描方式,但是优化的方法都有一个共同点,都是围绕着每个像素颜色值来下...
2013/06/14 浏览数(2,788) 分类(UI)
什么是扁平化设计? 在实际当中,扁平化设计一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。 随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在...
2013/06/14 浏览数(1,849) 分类(UI)
一、无图片技术定义 在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。 二、为什么要“无图片”? 首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K。明显发现CSS文件比CSS Image小很多。   当然单纯拿这两个来比,还不能说明什么。 下面我们...
2013/06/7 浏览数(1,380) 分类(UI)
效果: 可自动确定显示位置的横向二级菜单预览 [查看演示] 代码: <ul id="nav"> <li><a href="index.php?&lang=1">首页</a></li> <li><a href="page.php?cid=1&lang=1">公司简介</a> <ul class="submenu"> <li><a href="page.php?cid=8&lang=1" 公司简介</a></li> ...
2013/04/24 浏览数(1,803) 分类(jQuery)
说明: 通常我们使用以下方法来清除浮动: <style> .content{float:right} .clear {clear:both} </style> <div class="content">content</div> <div>sidebar</div> <div class="clear"></div> <div>footer</div> 这个方法简单有效,但是会浪费一个元素。下文是一个用CSS来清除浮动的方法,不需要添加空元素: <style> .c...
2013/04/18 浏览数(1,778) 分类(UI)
效果: 根据身份证号自动填写性别、年龄和籍贯 代码: HTML: <!-- checkPeopleNumber('ZZZZZZ201302281446','放性别的元素ID','放生日的元素ID','放籍贯的元素ID'); 根据身份证号自动填写性别、生日、籍贯,返回错误信息 14:48 2013年2月28日 --> 输入身份证号:<input type="text" name="peopleNumber" value="" onblur="documen...
2013/02/28 浏览数(2,694) 分类(Javascript)
说明: 相机里的照片太大传不到网站上?有这个工具就够了,免费、绿色、小巧、强大。推荐给需要的朋友们。 这个软件可以单张或批量缩小图片尺寸和体积、添加水印(文字、图片或者都加),软件还自带了一些特效。 用法: 第一步:点击“添加图片”,选中需要处理的照片,可以同时选多张。 第二步:如果不设置水印的话,跳过这一步,点下一个标签“特效处理”。 第三步:特效,不需要就跳过。 第四步:输出大小调整为“800×600...
2012/10/15 浏览数(4,185) 分类(UI)
名称 如何工作 cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。 linear 均速 ease 逐渐慢下来 ease-in 加速(渐入) ease-out 减速(淡出) ease-in-out 加速然后减速
2012/10/10 浏览数(1,590) 分类(UI)
效果说明: 在元素滚动到页面顶部的时候将其固定显示在顶部这个位置,效果如下: 元素滚动到顶部后固定位置 jQuery代码: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function() { var elm = $('#pordAttr'); var startPos = $(elm).offset().top; $.event.add(window, "scroll", function() { ...
2012/09/26 浏览数(4,543) 分类(jQuery)
定义和用法 letter-spacing 属性增加或减少字符间的空白(字符间距)。 该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。 注释:允许使用负值,这会让字母之间挤得更紧。 默认值: normal 继承性: yes 版本: CSS1 JavaScript 语法: object.style.letterSpacing=”3px” 实例 设置 h1 和 h2 元素的...
2012/09/25 浏览数(2,528) 分类(UI)
点击返回顶部
  1. 留言
  2. 联系方式