网页前端设计

http://www.86y.org

搜索文章

jq+ashx图片单点上传支持一个页面多次调用2015/7/2 20:17:14

jq+ashx图片单点上传支持一个页面多次调用

本人一直在前端做效果切图,趁着晚上有空写点笔记记录下。效果就是AJAX上传图片不错的效果,最大的特点是支持多个同时在页面中调用。(底部附源代码下载)效果如下图:本代码使用说明:1、支持水印,可以启用图片或文字(可以传参数?iswater=1);2、支持是否生成缩略图,并且要指定高宽大小(可作为参数传递?width=*&height=*);3、上传文件类型及文件大小限止大小;(需要在ashx文件中设置)。前端代码如下:(uploadimg.html)<%@ Page Language="C#" AutoEventWireup="true" CodeFile="uploadimg.aspx.cs&...未完,继续阅读→

ajax图片上传net

阅读(6578)条

Newtonsoft.Json高级用法2015/7/1 16:34:14

Newtonsoft.Json高级用法

  手机端应用讲究速度快,体验好。刚好手头上的一个项目服务端接口有性能问题,需要进行优化。在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数据,经过分析一个简单的列表接口每一行数据返回了16个字段,但是手机APP端只用到了其中7个字段,剩余9个字段的数据全部都是多余的,如果接口返回数据为40K大小,也就是说大约20K的数据为无效数据,3G网络下20K下载差不多需要1s,不返回无效数据至少可以节约1s的时间,大大提高用户体验。本篇将为大家介绍Newtonsoft.Json的一些高级用...未完,继续阅读→

.netjson技巧

阅读(6004)条

html5新增及废除属性2015/6/29 13:32:16

html5新增及废除属性

html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性。一、新增属性1、表单属性a、autofocus对input[所有类型]、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效。这个属性对登录页面很有用,可提升用户体验,有时登录页面就一个用户名,密码,页面加载后用户要手动定位到输入框,才能输入,有了autofocus,页面打开即可直接输入。举例:<form><p>用户名:<input type="text" auto...未完,继续阅读→

html5属性

阅读(7013)条

移动端开发,几个你可能不知道的CSS单位属性2015/6/18 21:04:06

移动端开发,几个你可能不知道的CSS单位属性

1. rem"em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小;“rem” 中的 “r” 代表 “root”,它表示以根(即“html”)元素的单位大小为基准来设置当前元素的单位大小,所以不管当前元素是任意子节点,一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的,这里的 “em” 和 “rem” 均具有继承性。2. vw 和 vh(移动端开发个人最喜欢的单位属性,也是这次介绍的重点...未完,继续阅读→

移动cssremem

阅读(7182)条

iScroll5移动端框架滚动类 2015/6/11 16:16:43

iScroll5移动端框架滚动类

之所以iscroll会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时,只能由一个绝对定位的header或是footer再加上一个可以内容的滚动的中间区域组成。  position:fixed在ios和android的使用,而ios4(4以及以前)系统以及以前的安卓系统(2.3及以前)并不支持position:fixed。这个问题可以使用iScroll框架进行解决。  之前一直都在使用iScroll4.0版本,后来查到iScroll5已经比较稳定了...未完,继续阅读→

手机网站使用iscroll插件链接无法点击解决方案2015/5/29 15:12:29

手机网站使用iscroll插件链接无法点击解决方案

在网上下载iscroll之后,运行测试到第二个demo 时,在火狐上面运行非常好,但是当我用手机测试的时候,我发 现,div中链接无法点击,此在网上也找不到相对应的解决方案,于是再检查看看其他的例子是不是也不能点击的时候,click例子在眼前一亮,click 案例里面的链接是可以点击的,于是乎,我对比了两个例子的调用插件js,果然是js的原因myScroll = new IScroll('#wrapper'); click jsmyScroll = new IScroll('#wrapper', { mouseWheel: true, click: true }); 发现在js里面有click:true,我想,问题我找...未完,继续阅读→

插件iscroll点击

阅读(7513)条

解决input file按钮要点击两次才弹出选择文件窗口2015/5/22 14:14:41

解决input file按钮要点击两次才弹出选择文件窗口

相信很多人都碰到过这个问题,文件上传控件透明后有的要点击两次才能弹出选择文件窗口,这里将将介绍如何避免要双击,只需要单击是可以实现的。 本来一直无心留意这个图片上传file按钮的BUG,因为有时候为了效果好看有时候我们要做点什么比如隐藏input模拟点击。FF可以chrome也可 以,唯独IE不行,报安全错误。所以还是得找方法解决,最终在某网站找到了,只是把input按钮的透明度改为0然后定位到最顶层,虽然透明,不表示没 有,这样点击上传时不影响效果又能实现所要的效果。真心不错。方法其实很简单。下面就介绍如何操作。示例效果解...未完,继续阅读→

input上传bug

阅读(21604)条

手机版 js图片浏览插件(附源代码下载)2015/5/20 20:33:39

手机版 js图片浏览插件(附源代码下载)

在新的手机项目中有要求对多张图片进行浏览,所以本人也是在网上找了很多都没有找到合适的代码,后来在某网站上找了一个改成了自己的比较好用,而且没有某网站那样调用JSON,这样感觉就通用,而且很方便,可以对多个区域进行调用即。底部附源代码下载一、效果图下图所示:放大浏览图内容 主要div 源代码如下:<!-- 放大浏览图开始 --><div class="m-dt" id="Jslider"> <div class="swipe-wrap" id="Jslider-wrap"> <div class="swipe-con"><...未完,继续阅读→

前端人员必看CSS命名规范2015/5/19 14:55:28

前端人员必看CSS命名规范

作为前端的设计人员,对于CSS的接触,就像吃饭一样。所以CSS命名规范 命名是 前端人员必看的。文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解:所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:基本样式库 /css/core通用UI元素样式库 /css/libJS组件相关样式库 /css/ui业务类的CSS是指和具体产品相关的文件,放在如下目录中:读书 /css/book/电影 /css/movie/音乐 /css/music/社区 ...未完,继续阅读→

css命名技巧

阅读(8812)条

CSS3的background-size优化Sprites图显示实例2015/5/16 11:05:42

CSS3的background-size优化Sprites图显示实例

本篇主要是讲css3如何使用background-size与sprites同时使用技巧。运行查看效果时别忘了用支持CSS3 的浏览器查看.ie9+,chrome,firefox,...一、background-size使用方法 可以创建一张Sprites图,这张图既有普通分辨率图像,又有高分辨率下的图像?你可以,但你还是要面对,你的用户在一个较慢的带宽下下载一个大图的烦恼。你也要同时面对IE9以下的浏览器不支持background-size的麻烦问题。你最好还是分别为高分辨率和普通分辨率创建不同的两张Sprites图。这个时候又有不同的声音了,这不是增加工作量吗?但这真的不是,在我的工...未完,继续阅读→

css3sprite技巧

阅读(6012)条

jq无锚标记平滑滚动效果,易用2015/5/6 21:05:20

jq无锚标记平滑滚动效果,易用

今天看到有个效果需要做一个菜单项,点击后平滑滚动到指定位置,以前是用锚标记直接就可以做到了,但是平滑就要复杂点。所以今天用JQ做了一个不错的效果给大家。效果如图:核心代码:$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);改成自己实用的效果才是最重要的,源代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/199...未完,继续阅读→

jq滚动平滑

阅读(6472)条

手机版浏览器禁止滚动条与释放实例2015/5/4 16:58:29

手机版浏览器禁止滚动条与释放实例

写页面事件的时候,有的时候需要用event.preventDefault取消原有的事件后进行重写,这个大家应该都知道。那么怎么在取消默认事件后再恢复呢。解绑我们自定义的事件就好了。以Jquery为例我们用$(“body”).bind(“touchmove”,function(event){event.preventDefault;//code});取消了body的拖动事件。恢复这个拖动事件只要$(“body”).unbind(“touchmove”);为此我专门做了一个HTML特效希望大家喜欢。效果图如下:    源代码如下:<!DOCTYPE HTML><html&...未完,继续阅读→

解决如何去掉手机版HTML页面滚动条2015/5/2 20:14:06

解决如何去掉手机版HTML页面滚动条

经过测试,默认的HTML5页面在手机浏览器测试中发现 横向,纵向滚动条都有,尽管页面没有内容也是照常出现。开始不知道什么原因,原来是没有加一句手机的META代码。<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />width - viewport的宽度height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手动缩放不知道你是否...未完,继续阅读→

CKEditor插件开发实例2015/3/26 21:04:28

CKEditor插件开发实例

最近忙于开发工作流,想起之前开发的OA ,缺少一个重要的功能:表单设计器。因为我们的OA是基于Sharepoint开发的,如果没有表单设计器,定义一个列表的界面需要开发一个feature,或则需要VS开发一个aspx页面。这事一个很麻烦的事情。所以考虑实现一个表单设计器。于 是我到网上找HTML 编辑器,找到好几个,分别有CKEditor,TinyMCE,还有一个基于JQuery的一个编辑器XHEditor。这几个编辑器我就不做比较了。我 这里选择使用CKEditor。既然要做表单设计器,我们的需要扩展这HTML编辑器,CKEditor提供了方便可扩展的插件体系,我们可以很方便...未完,继续阅读→

CKEditor插件开发

阅读(6128)条

JQuery中serialize() 序列化2015/3/12 20:57:17

JQuery中serialize() 序列化

在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对 (Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对 (key1=value1&key2=value2…)后提交。下面介绍JQuery中serialize()的用法一、serialize()定义和用法:serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象。你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 U...未完,继续阅读→

jsjqserialize

阅读(5978)条

JQ操作select项 2015/2/2 14:48:17

JQ操作select项

jQuery获取Select元素,并选择的Text和Value:1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text3. var checkValue=$("#select_id").val();  //获取Select选择的Value4. var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值5. var maxIndex=$("#select_id opt...未完,继续阅读→

jqselect

阅读(7247)条

css之input hover,focus伪类特效2014/8/13 9:08:21

css之input hover,focus伪类特效

记得以前为了兼容ie6,ie7等低版本不支持css伪类,不得不用JS去做效果。现在IE6,7使用的人越来越少了,我们是时候应该抛弃它们了(使用JS控制文本框特效)。CSS伪类可以很好的做到这点只需要几行代码就可以了。而且是全局性的,不需要每个文本框跟按钮去添加样式。一劳永逸,够爽的吧。下面就开始介绍。IE6 IE7 IE8(Q) 不支持如”:focus,:hover”等伪类特效,所以我们的特效是基于支持伪类的浏览器中才能看到的特效。支持键盘控制一样可以显示效果。效果如下图所示:兼容情况IE6IE7IE8(Q)IE8(S)FirefoxSafariOperaChromeNNNY...未完,继续阅读→

css伪类focus特效

阅读(22580)条

ae插件整理 批量下载2014/8/7 10:06:23

ae插件整理 批量下载

1、Red Giant AE 烟雾水火插件 Image Lounge 1.4.5 for 32/64下载,内含注册码【插件介绍】请注意:这里提供的此款插件支持32和64位系统,仅适用于WIN系统Image Lounge 是一款运行于 Adobe After Effects 的插件程序;它包含超过 20 套制作动态图像和动画文字的滤镜。比如焰火,烟雾以及不规则云和火等……下载地址:点击下载 密码: k8ak插件效果中英文对照表:1 IL Alpha Ramp(Alpha渐变)2 IL Border Patrol(圆角)3 IL Color Map(彩色贴图)4 IL Effect Blender(效果混合器)5 IL Fractal Brimstone(不规则的硫磺)6 I...未完,继续阅读→

ae插件

阅读(11994)条

CSS3打造一组质感细腻丝滑的按钮2014/8/6 9:53:05

CSS3打造一组质感细腻丝滑的按钮

CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果。  温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。HTML效果如下: 这些精美的效果用到了 CSS3 RGBA、box-shadow(阴影)、border-radius(边框圆角)和 linear-gradient(线性渐变),为了便于阅读,功能介绍代码如下:.button { min-height: 1.5em; display: inline-block; padding: 12px 36px;...未完,继续阅读→

css3按钮

阅读(6366)条

C#实现Base64编码与解码2014/7/31 17:45:59

C#实现Base64编码与解码

一、编码规则      Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码。它将需要编码的数据拆分成字节数组。以3个字节为一组。按顺序排列24 位数据,再把这24位数据分成4组,即每组6位。再在每组的的最高位前补两个0凑足一个字节。这样就把一个3字节为一组的数据重新编码成了4个字节。当所 要编码的数据的字节数不是3的整倍数,也就是说在分组时最后一组不够3个字节。这时在最后一组填充1到2个0字节。并在最后编码完成后在结尾添加1到2个 “=”。例:将对ABC进行BASE64编码:1、首...未完,继续阅读→

netbase64编码解码

阅读(6725)条

当前第  7  页 / 共  28  页  总共559条记录  

45678910