网页前端设计

http://www.86y.org

搜索文章

js无刷新预览所选择的图片文件2014/4/2 16:06:29

js无刷新预览所选择的图片文件

本实例效果用进来非常方便不会错误上传不相关的文件。选中文件后可以即时预览你选中的图片文件是不是非常方便呢。1.效果如下,可测试 //本地图片预览function setImagePreview(fieldupload, image, imagediv) {var docObj = document.getElementById(fieldupload);var imgObjPreview = document.getElementById(image);if (docObj.files && docObj.files[0]) {//火狐下,直接设img属性 imgObjPreview.style.display = "block";imgObjPreview.style.width = "150px";imgObjPreview.style.heig...未完,继续阅读→

预览图片js

阅读(5012)条

css让网页变灰兼容IE/ff/chrome2014/4/1 16:24:19

css让网页变灰兼容IE/ff/chrome

今天在chrome用百度看到【马航最后通话内容】就点进去了,发现谷歌浏览器的图片颜色都变成灰色的了。但是今天不是讨论马航,而是讨论一个前端站长的技术问题—css让网页变灰兼容IE/ff/chrome。好奇的我用debug查看了下。代码如下:html{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(1)}然后自己使用后发现FF无效。然后自己也动...未完,继续阅读→

css灰色图片

阅读(4936)条

jQuery防止click双击多次提交及传递动态函数方法2014/3/29 14:55:54

jQuery防止click双击多次提交及传递动态函数方法

今天是写的是关于JQ的双击事件防止多次提交的问题,并且通过函数可以批量定义,通能性更强了,通过方法动态绑定元素的事件。而且可以动态传递函数名或者多参数等(本实例只传递函数名通过Eval调用)。我们都知道在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click)。先看一下点击事件的执行顺序:  单击(cl...未完,继续阅读→

jqclick函数

阅读(4476)条

jq小米排队特效2014/3/27 9:54:55

jq小米排队特效

昨天在抢红米的时候,发现红米的排队的特效挺好看的。然后就把他这个效果给弄了下来。自己写了个插件,调用方便。其实就是根据背景图片的切换做成了类似动画的效果。(思路延伸:JS游戏方面应该可以引用这种特效,因为都是背景在切换)效果图如下:源代码:<!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/1999/xhtml"><head><meta http-equiv="Content-Ty...未完,继续阅读→

jq插件背景特效

阅读(5475)条

关于css3边框的radius和image用法的详解2014/3/26 9:16:58

关于css3边框的radius和image用法的详解

一、圆角边框:IE9.0以前版本不支持 border-radius: 接受8个属性,前四个为x轴,后四个为y轴,以斜杠划分x轴、y轴,即border-radius:左上较 右上角 右下角 左下角 / 左上角  右上角  右下 角  左下角  ;(x轴/y轴 ),如:border-radius: 100px 0 100px 0/100px 0 100px 0。 顺序图: 原理图:   原理:     以四个角a,b,c,d 为起点,横向为x轴,纵向为y轴,以左上角x轴100px,y轴100px两点之间为弧,四个角交点为圆心的的四分之一圆,同样右下角也是,即 border-radius:...未完,继续阅读→

css3边框背景

阅读(3677)条

jq插件之文字左右滚动后延迟再滚动2014/3/25 14:11:05

jq插件之文字左右滚动后延迟再滚动

今天做了一个关于JQ的文字滚动插件,每条滚动后停顿N秒后继续滚动。效果不错,本插件支持一个页面N个相同的特效。在这里分享给大家。效果如下图:源代码如下:(function(f, d, a) { d.fn.scrollGrid = function(k) { var l = d.extend({ perScroll: 1, speed: 14, interval: 4000 }, k || {}); return this.each(function() { var n = d(this), m = n.find(">.listWrap"), o;s = m.find(">a&quo...未完,继续阅读→

jq插件文字滚动

阅读(6445)条

原生js全选、全不选、反选特效2014/3/24 9:25:03

原生js全选、全不选、反选特效

原生js版全选、取消全选、反选效果。效果图如下:源代码如下:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>原生js全选、全不选、反选特效</title> <style> h2, ul, p { margin: 0; padding: 0; } ul { list-style: none; } h2 { font-size: 100%; text-indent: 5px; } input { vertical-align: -2px; *vertical-align: -1px; } .m-box { width: 400px; border: 1px #666 solid; margin: 0 auto; font: 12...未完,继续阅读→

js全选特效

阅读(3981)条

利用雅虎YQL解决跨域获取JSON问题2014/3/20 16:56:35

利用雅虎YQL解决跨域获取JSON问题

记得以前有写过一篇 【解决Json数据跨域问题】文章是怎么样获取气象局返回的Json实例。今天朋友发现用JQ的jsonp跨域好像不行,还是用YQL来做了。然后获取是成功了。但是一些参数使用起来不大好用,所以开始研究起来了因为对不同的json数据获取方式是不同的。下面就开始介绍我是如何来获取跨域的JSON数据的!效果图如下:源代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www....未完,继续阅读→

json跨域YQL

阅读(4541)条

移动平台的meta标签的神奇功效2014/3/20 9:14:24

移动平台的meta标签的神奇功效

对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?1、Meta 之 viewport说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了...未完,继续阅读→

metahtml5移动平台

阅读(3331)条

让网站的图片变成灰色效果兼容所有主浏览器2014/3/18 14:25:15

让网站的图片变成灰色效果兼容所有主浏览器

以前有写过用 【HTML5&jQuery指向时图片从灰度变成彩色】 的文章,不兼容跨域的网站图片,所以今天看到有篇文章支持多浏览器图片变灰度的效果。就把上一篇文章改进一下。希望在前端努力的朋友可以借鉴一下。兼容:兼容Firefox 3.5+, Opera 15+, Safari, Chrome, and IE。效果图如下:(因为本人虚拟机不支持SVG文件的打开,所以只能你自已手动复制内容到本地运行!)  源代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...未完,继续阅读→

css灰色图片

阅读(7218)条

SQL2005 用户sa登录失败(错误18456)图文解决方法2014/3/15 21:00:32

SQL2005 用户sa登录失败(错误18456)图文解决方法

新装了SQLServer2008,但是用sa用户连接的时候出现18456错误,SQLServer2005错误处理方法跟SQLServer2008错误的处理方法一样,所以贴图是SQLServer2008的。在网上查找解决方法如下,记录下来。无法连接到 .\SQLEXPRESS。--------------------------------------------------------------------------------------------------------------其他信息:用户 'sa' 登录失败。 (Microsoft SQL Server,错误: 18456)  解决方法: 1、打开数据库——用Windows身份登录数据库 02、登录名—&mda...未完,继续阅读→

sqlserver错误方法

阅读(4251)条

jq仿虾米网flash效果2014/3/13 10:05:36

jq仿虾米网flash效果

这是很久以前写的一个效果了,之前虾米音乐网首页的一个flash效果,最初觉得这flash效果也可以完全用jq来写,于是空余时间就写了下当作练习吧,现在就拿出来跟大家分享下其中的实现原理!先上最终效果图:特点:1、鼠标经过动态创建元素2、判断鼠标经过每行的最后二个改变方向完整代码如下:<!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/1999/xhtml"><head> ...未完,继续阅读→

jq图片特效

阅读(3218)条

Web开发者不容错过的10段CSS代码2014/3/12 13:54:03

Web开发者不容错过的10段CSS代码

 Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。  本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。  1. CSS Resets  网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。html, body,...未完,继续阅读→

cssweb开发

阅读(4012)条

关于伪静态的url获取方法2014/3/12 13:10:04

关于伪静态的url获取方法

伪静态页面是静态URL与动态URL互通的一个桥梁,它是指动态网址通过URL重写的手段去掉其动态参数,使URL静态化,但在实际的网页目录中并没有重 写URL。简单来说,伪静态URL就是通过服务器转换伪装文件名或地址,使该页面类似于静态页面,但服务器上没有独立存在的文件,其本质还是动态页面。今天朋友找我说js获取不到url地址(伪静态URL)。然后我就开始找方法,发现原来:window.location可以获取伪静态的url地址方便使用记录下来。未完,继续阅读→

js伪静态url

阅读(4319)条

实现CSS3动画的工具、特效和教程指南2014/3/4 10:24:32

实现CSS3动画的工具、特效和教程指南

CSS3的动画能够实现动画从一个CSS样式配置过渡到另一个。动画由两部分组成,描述了CSS动画和一组关键帧指示动画风格的开始和结束状态。  CSS 动画 工具Tridiv Animate.css Anima animo.js CSS3 Animation Cheat Sheet Ceaser Magic CSS3 Animations Stylie Sencha Animator CSS3 Keyframes Animation Generator Morf.js CSS 动画教程及特效Animated 3D Bar Chart with CSS3查看DEMO 下载Interactive Infographic with SVG and CSS Animations查看DEMO 下载...未完,继续阅读→

css3教程特效

阅读(4458)条

html5移动端页面分辨率设置及相应字体大小设置方式2014/2/28 16:05:58

html5移动端页面分辨率设置及相应字体大小设置方式

对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结.网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿...我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够。 今天就研究一下各大互联网公司对于移动端页面的处理方式。主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp主要研究点:viewport的设置,字体的设置,图片原始宽高设置汝甚吊,令尊知否? 咦?target-density...未完,继续阅读→

html5字体css移动端

阅读(11242)条

如何让加载的flash元件垂直距中2014/2/28 11:12:20

如何让加载的flash元件垂直距中

今天在做flash的时候发现元件的位置是固定的,然后没办法随着浏览器的改变而变化(让元件垂直距中),下面就介绍如何用脚本来控制,场景尺寸变化时变更影片的位置。下面举一个在AS2中的例子:新建一影片,新增一个影片元件,为了方便在元件上画一个矩形,然后拖出场景取名为aa。然后在场景的时间轴上写下如下代码:function center(){ aa._x=(Stage.width-aa._width)/2; aa._y=(Stage.height-aa._height)/2;}center();var obj:Object=new Object();obj.onResize=function(){ center();}Stage.align="TL";Stage.addListe...未完,继续阅读→

asflash元件

阅读(2945)条

如何在电脑上测试手机网站(全)2014/2/24 10:21:39

如何在电脑上测试手机网站(全)

最近公司要开发网站的移动版,让我准备准备知识,话说本人开发移动网站的经验还真不多, 最悲剧的事情就是我的手机是个经典的诺基亚,而且公司还不给配手机,这是有多讨厌,没办法,没有手机只能用电脑模拟了,相办法代替,查了很多资料,尝试了 大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp。Chrome*chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备。以下标星的为推荐方法。1.新建Chrome快捷方式右...未完,继续阅读→

手机测试网站

阅读(4186)条

js 二分法2014/1/16 12:40:07

js 二分法

采用二分法查找时,数据需是排好序的。 基本思想:假设数据是按升序排序的,对于给定值x,从序列的中间位置开始比较,如果当前位置值等于x,则查找成功;若x小于当前位置值,则在数列的前半段中查找;若x大于当前位置值则在数列的后半段中继续查找,直到找到为止。<!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/1999/xhtml"><head><meta http-equiv="Con...未完,继续阅读→

js二分法

阅读(5221)条

js仿百度贴吧验证码特效2014/1/13 21:34:18

js仿百度贴吧验证码特效

今天看到有百度验证码挺有意思的,就把它仿下来了。利用JS实现当选择满4个后自动对比,本文中采用静态对比的方法看你是否全部选择对。然后提示【答案正确!】或【答案错误!】,以后有空再去做成程序,先分享给大家!效果图如下:源代码如下:<!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/1999/xhtml"><head><meta http-equiv="Content-Type" content...未完,继续阅读→

js验证码特效

阅读(5134)条

当前第  8  页 / 共  28  页  总共549条记录  

567891011