网页前端设计

http://www.86y.org

搜索文章

Nivo Slider-超好用的jQuery图片轮播插件2014/7/29 16:58:35

Nivo Slider-超好用的jQuery图片轮播插件

今天在博客园发现一JQ的图片轮播插件,学习了一下,非常好用,使用起来也超级简单。(底部附下载地址)特色如下:✓  16个独特的过渡效果✓  简洁和有效的标记✓  加载参数设置✓  内置方向和导航控制✓  压缩版本大小只有12KB✓  支持链接图像✓  支持 HTML 标题✓  3套精美光滑的主题✓  在MIT许可下免费使用✓  支持响应式设计浏览器兼容情况✓  Internet Explorer v7+✓  Firefox v3+✓  Google Chrome v4✓  Safari v4✓  Opera v10.5调用方法:1、在页面he...未完,继续阅读→

jq插件图片轮播

阅读(8529)条

子页调用母版属性及方法 2014/7/25 13:32:24

子页调用母版属性及方法

今天并没有看什么新鲜货,只是对以前资料的一些整理。看着看着自己觉得郁闷无比,原来很多东西我以前就已经找到了解决方法,只是没有及时总结和提起足够的重视。看了一下子页调用母版属性的方法,忽然发现以前的方法可以不同实现,实际上呢似乎关于调用不外乎2种,即调用属性和调用方法,分别加以应对:(1)调用母版方法:在子页声明被调用页的信息,然后直接用master.function()调用。(2)调用母版属性:在子页中通过FindControl搜索被母版页的id,调用之。言归正传,vs2008的母版相信对于网站的设计已经占有一席之地,而调用为题应该已经...未完,继续阅读→

net母版属性方法

阅读(5972)条

c#net如何抓取gzip及其它页面防止乱码2014/7/12 13:21:28

c#net如何抓取gzip及其它页面防止乱码

最近在做一个页面采集的过程中发现,页面抓取后乱码,而且时好时不好。然后发现编码也没有问题,原来是GZIP压缩导致的。在朋友们的热心帮助下终于解决了。下面就贴代码吧,抓取gzip及其它页面防止乱码。核心代码如下:using (HttpWebResponse response = (HttpWebResponse)req.GetResponse()) { if (response.ContentEncoding.ToLower().Contains("gzip")) { using (GZipStream stream = new GZipStream(response.GetResponseStream(), CompressionMode.Decompress)) ...未完,继续阅读→

net抓取采集乱码

阅读(8184)条

手机的 HTML5 Audio 播放问题记录2014/6/19 10:19:40

手机的 HTML5 Audio 播放问题记录

最近的项目里面调试手机用的音乐播放网站,发现智能手机浏览器的HTML5 Audio播放真是各种别别窍啊,就在这里记录下下吧。所用手机:在日本发卖的大多数智能手机,包括iPhone3GS、iPhone4、iPhone4S、iPhone5(iOS5和6),Android2.3、4.0、4.1、4.2的各种手机。实现的功能:单首歌播放和停止,多首歌连续播放,歌曲都是MP4原有实现流程:1,为了处理共通化和隔离,不在网页里面直接写<audio>,而是写<a>并且用javascript在上面挂onclick事件处理,播放的时候new出audio对象来使用。2,audio对象的属性:audio.preload="au...未完,继续阅读→

Androidiosaudiohtml5

阅读(18325)条

html5 mp3播放器2014/6/19 9:57:05

html5 mp3播放器

最近一值在研究html5的audio功能。html5播放mp3时发现有些问题。歌词第一次加载没有问题,第二次加载时页面必须要重新添加audio元素歌词才能正常。研究了很久都没有解决这个问题。后来直接让页面刷新了。 效果图如:预览地址(http://www.86y.org/mp3/fm.aspx)未完,继续阅读→

html5mp3播放器

阅读(7135)条

解决无限滚动的成功方案2014/5/22 9:07:18

解决无限滚动的成功方案

考虑在外面,网页设计的问题你还没有碰到提供无限滚动的至少一个站点目前的趋势,这是不大可能。他们很容易检测,因为他们就是你去,向下和向下和向下,但从未似乎到达底部,除非你是互联网的连接突然决定要崩溃。无限滚动听起来像是一个有趣的概念,但你怎么能告诉是否此类功能是正确的选择为您的站点?很好,基本上,由起草的利与弊的无限滚动和决定哪一个胜过其他。如果你是任何社会媒体网站,从 Facebook 或 Pintrest 或 Tumblr,Twitter 用户你肯定见他们的无限滚动的选择已经如何成功,虽然没有人说你必须成为一个多亿的公司有数...未完,继续阅读→

滚动技术

阅读(7863)条

10款最受欢迎Web设计人员图标集免费下载2014/5/20 8:49:53

10款最受欢迎Web设计人员图标集免费下载

当您需要高质量的免费图标时,你该怎么办?这篇图标集将帮助您你可以找到最好的免费的图标。我们列出确切地 10 最受欢迎免费到下载高质量图标集。通过使用这些图标,您将节省的时间和你将会有高质量的图标。配色方案,图中,使用的所有的这些图标的外观和感觉是真的很酷和令人印象深刻。此外可以使用任何你想要的地方、 个人项目或商业这些图标。01. 195 flat flag PSD icons02. Free PNG Credit Card, Debit Card and Payment Icons Set03. Metro UI Icon Set04. Modern UI Icons05. 350 pixel perfec...未完,继续阅读→

素材图标设计

阅读(12088)条

会移动的JQ导航菜单2014/5/2 16:21:14

会移动的JQ导航菜单

下拉菜单是企业网站开发中常用的到的东西,下面我介绍一个基于jquery实现的下拉菜单效果,会移动的JQ导航菜单。效果如下:源代码如下:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>会移动的JQ导航菜单-幸凡学习网</title><style>/*reset*/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0...未完,继续阅读→

jq菜单实例

阅读(7328)条

11个JavaScript颜色选择器插件2014/4/19 9:19:52

11个JavaScript颜色选择器插件

 几年前,很难找到一个合适的颜色选择器。正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总。在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复杂,其他比较简单,相信应该会有适合你的。  1.ExColor  ExColor是一个类似Photoshop样式的jQuery颜色拾取插件,其定制性非常高,通过参数设置可生成各种样式和效果的颜色拾取器。它可以附加到任意的input输入框,通过简单地调用一行函数即可。  2.JScolor JSColor是一个简单、易于使用的JavaScript库,可以将任何给定input框转化为颜色选择器。该选...未完,继续阅读→

js颜色插件

阅读(7852)条

js判断鼠标从什么方向进入容器的算法分析2014/4/17 17:12:40

js判断鼠标从什么方向进入容器的算法分析

昨天老大说让我写一个判断鼠标从什么方向进入容器的js插件。第一反应就是算出进入容器的点的坐标,然后与四个边线的位置比较。可是又觉得这样的想法好老土,没有一点技巧性。(文章底部附实例代码)效果图如下:在网上搜索发现有一个很多人都转载的算法,如下:$("#wrap").bind("mouseenter mouseleave",function(e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h...未完,继续阅读→

js算法鼠标

阅读(10009)条

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

阅读(8291)条

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灰色图片

阅读(10369)条

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

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

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

jqclick函数

阅读(8190)条

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插件背景特效

阅读(11162)条

关于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边框背景

阅读(7697)条

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插件文字滚动

阅读(9765)条

原生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全选特效

阅读(7514)条

利用雅虎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

阅读(8163)条

移动平台的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移动平台

阅读(6295)条

让网站的图片变成灰色效果兼容所有主浏览器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灰色图片

阅读(10863)条

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

567891011