网页前端设计

javascript 获取当前 URL 参数的两种方法：//返回的是字符串形式的参数，例如：class_id=3&id=2& function getUrlArgStr(){ var q=location.search.substr(1); var qs=q.split('&'); var argStr='' if(qs){ for(var i=0;i<qs.length;i++){ argStr+=qs[i].substring(0,qs[i].indexOf('='))+'='+qs[i].substring(qs[i].indexOf('=')+1)+'&' } } return argStr; } //返回的是对象形式的参数 function getUrlAr...未完，继续阅读→

今天在IOS系统上测试 web App的时候发现使用了position:fixed/absolute时，DIV容器里面下滑动没有像普通页面一样顺畅，手滑到哪就停到哪。感觉很卡一样，而安卓效果正常，算是一个bug。终于在网上找到了一个解决方法。 -webkit-overflow-scrolling:touch; 加上去后果然有用，也就是说DIV容器使用的定位属性引起的。当时效果是弹出一个层，body无滚动条，但是弹出层需要可以上下滑动。如果你也碰到了这个问题希望可以用这一句css代码帮到你！未完，继续阅读→

一、概述做微信页面经常会碰到IOS与Android不兼容性问题，例如顶部置顶搜索框，IOS 获取焦点有软键盘唤起的情况下fixed置顶无效，而是变成了absolute跟随页面可以滚动，Android则没有任何问题，在ios8以下系统，当小键盘激活时，都会出现位置浮动问题的bug，所以暂时只能自己Fixed。先说明我本身的使用情况。方法1：本来可以用absolute（定位）来解决，但是我的页面是有下拉加载新数据，依靠body的scroll事件来触，因为用了定义并不能触发。所以我在此种情况使用的思路是：BUG如下图所示：方法2、让fixed变为relative然后滚动到顶部，同时在...未完，继续阅读→

本文讲解rpx和rem应用于微信小程序，如果你还没有入门，建议先从下面看起：微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍如果看完上面几篇文章，我们开始进入正题吧~~一、rem的使用1） js中导入下面这段代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function () { var clientWidth = docEl.clientWidth; if (...未完，继续阅读→

WebSocket是html5新增加的一种通信协议，目前流行的浏览器都支持这个协议，例如Chrome，Safari，Firefox，Opera，IE等等，对该协议支持最早的应该是chrome，从chrome12就已经开始支持，随着协议草案的不断变化，各个浏览器对协议的实现也在不停的更新。该协议还是草案，没有成为标准，不过成为标准应该只是时间问题了,目前对该协议支持最完善的浏览器应该是chrome，毕竟WebSocket协议草案也是Google发布的。在WINDOWS SERVER 2012或WINDOWS SERVER 2012 R2 安装说方法1、在任务栏上，单击服务器管理器。2、在服务器管理器，单击管理菜单，然...未完，继续阅读→

一、概述：本次修改的是最新版本kindeditor-4.1.10 主要是针对.net版，批量上传添加水印，水印可以选择文字或是图片。修改过程挺奇葩，因为有些API不熟，导至走了不少弯路，言而总之还是惊喜。喜欢本实例的朋友可以下载DEMO源文件，文章底部附下载地址。效果图如下： 二、环境要求：1、.net4.0 版本或以上2、添加引用 LitJson.dll，下载地址：http://download.csdn.net/detail/pukuimin1226/5851711只要以上两个条件就可以在IIS下运行了。 三、修改代码：1、kindeditor-all.js，本人没有使用精简js，因为方便修改。搜索uploadDesc: u...未完，继续阅读→

一、概述：今天在测试UEditor 编辑器 【HTML代码】模式下修改时又发现了一个问题了，源代码状态下后台无法获取修改后的内容，用它本身的js方法可以获取ue.getContent(),后台获取需要修改成设计视图才能获取。不知道大家有没有碰到过这种问题。不知道是BUG还是UE本身的产品设计，但是对用户体验来说也是很不好的，本方法只是取巧写了一个js方法，使用起来还算方便，不需要修改源代码。二、解决方案1、在.net控件使用代码如下：(其它语言只需要在提交前执行方法即可getContent())<div><textarea id="myEditor" name=...未完，继续阅读→

一、概述：关于UEditor在谷歌浏览Chrome打开选择指上传图片，发现【点击选择图片】时无法立即弹出选择框，而是等4-7秒钟才显示出来的BUG，试了N多方法，改层级都用了，也无效。在网上找到了一个篇文章，按教程发现没有找到这个需要修改的问题，然后自己又鼓捣着找到了。然后就解决了这个bug。二、解决方案修改路径:/ueditor/dialogs/image/image.js,如下图所示：修改位置：367行开始（或通过 "accept" 或者"image/*" 找到下图的位置），将accept: { title: 'Images', extensions: acceptExtensions, ...未完，继续阅读→

一、概述：以前写过一篇tab选项卡效果[前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态],现在看来这种功能是可以但是不适合太多的菜单。所以今天就为了故意补上这一篇之《jquery左右滚动的tab选项卡效果》页面底部附下载地址,当然如果你使用esayui也可以实现那种效果，但是感觉太庞大了，整个框架使用很不方便。 效果图下图所未：demo 地址：http://www.86y.org/demo/tab_scroll/二、使用说明:1、调用tab窗口方法class属性必须使用 J_menuItem的样式、data-index菜单的顺序、href弹窗的url可以加参数区别但...未完，继续阅读→

每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都被改写了。但是，它比较抽象，初学者很难掌握，网上的教程也不多。所以，我把自己的学习笔记整理出来了，希望对大家有用。一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它...未完，继续阅读→

HTML5作为下一代的 Web 标准， 拥有许多引人注目的新特性，如 Canvas、本地存储、多媒体编程接口、WebSocket 等。WebSocket 在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道。Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用。HTML5 WebSocket 的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。 WebSocket 在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。     下面给出一个简单的例子，来说明websock...未完，继续阅读→

一、概述：最近在修改后台效果，大家知道后台使用table的概率很高，数据列表展示都是用它。但是在使用的过程中table第一行标题栏老是会随着滚动条而移动有时候看哪列的数据还要移上去才能看到是哪行。那么就需要第一行的标题置顶了，此效果能够完善的解决这个问题。当然有些控件已经做到了这些效果。但是比较麻烦使用起来很不方便，所以自己动手做了一个。使用也比较方便。效果如下：二、大概思路是：1、首先利用一个DIV模拟滚动条（给容器设置的高度，这样超出时才有滚动条。并且使用replative相对定位,以便表格使用定位）;2、模拟一个表格...未完，继续阅读→

一、概述：在html5以前，大家对批量上传还只能用SWF或，模拟来实现数据批量上传的效果，使用起来非常不方便，代码也是非常的多。随着html5越来越普及，已经可以直接使用file文件上传控件直接批量上传了。关键属性 multiple,本实例的实现是模拟了input file效果，功能是一样的。上传图片后台结合了net 中的ashx接口实现了批量上传并添加水印的效果。(底部附源代码下载)效果如下图所示:二、实现过程：1、准备工作：引入Jq库（http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js）,及jquery-form.js插件（jquery-form.js下载地址）2、htm...未完，继续阅读→

一、概述：在做项目的时候经常会用到跨域调用一些接口，所以不得不用jsonp来做，但是使用时应该注意几问题，jsonp返回的数据不能是简单的json格式，不然jsonp会不识别导致获取不到值。下面就开始介绍如何获取jsonp的方法级json接收的格式效果如图：二、核心代码及注意事项1、jq库的引入<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>2、jsonp调用方法$.ajax({ type: "get", dataType: "jsonp", ...未完，继续阅读→

一、概述：做前端经常要写一些常用的JS事件，如：获取radio选中的值，判断有没有选中，等等，说难不难，只是需要查阅即可。本篇【JQuery判断radio是否选中并且获取选中值】也是讲述一些快速容易记住的方法给大家。演示效果如下：二、源代码及环境：1、引用Jq库 ：http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js2、html源代码如下：<p>请选择你的性别</p><p><label>1.<input type="radio" name="sex" value="男" />男</label><br /><label>2.<...未完，继续阅读→

朋友圈最近火了一部丧尸电影　　我不说大家都知道是《釜山行》了，　　这部7月20日在韩国上映的电影，在未经大力推广宣传的情况下，靠口口相传火到了内地。　　　　自从2010年美剧《行尸走肉》播出后，丧尸主题的电影就如洪潮一般席卷了影视界、风头之广乃至游戏界也都纷纷推出丧尸版本游戏。　　　　《釜山行》影片里几乎囊括了所有事件可触及的职业。　　老人、儿童、孕妇、青少年、壮年、社会精英、乞丐、以及贪生怕死的火车职员。　　各式各样的性格交织在一起，　　带来这场看着酣畅淋漓的“丧尸战”。　　故事讲述了一位利己主义的父亲因为家庭不和...未完，继续阅读→

一、简述：本着做手机端的二维码保存到本地的效果，但是没办法实现。只能在PC端实现，干脆写了下来，以便日后使用。使用了html5的canvas标签，动态创建二维码，可以自己输入url，二维码的尺寸，然后生成自己的二维码。需要使用支持html5的浏览器方可。效果图如下：二、实例代码<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>二维码生成器并下载-幸凡学习网</title> <style type="text/css&...未完，继续阅读→

页面调用lhgdialog框架时url含#号引起的BUG一、lhgdialog框架介绍lhgdialog是一功能强大的简单迷你并且高效的弹出窗口插件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+主要以iframe方式加载单独页面为主的弹出窗口，由其适用于后台管理和webOS类项目使用，独立的内容页更方便管理，页面的也不易受其它页面的影响，而且内容页可以是静态或动态的任何一种文件。二、使用环境在C#.net下的调用原本是想利用#top号来实现点击分页后自动定位到锚标的地方，因为顶部到列表表格还有100多像素。定位...未完，继续阅读→

.net sitemap制作方法一、什么是网站地图及作用网站地图，又叫站点地图，它就是一个列出了你网站上所有页面地址的清单文件，一般来说分为2种，一种是给搜索引擎看的，一种是给用户看的，前者帮助搜索引擎更好地收录你的网站，后者帮助用户更好的了解你的网站整体结构、更快的找到他们想要找的内容。本文讲的主要是前者，当然作用也就是SEO优化。网站地图：一般有3种格式，txt、xml、html，绝大部分情况下都是用xml格式，百度、谷歌都是支持xml格式。本文主要讲xml的制作方法。二、制作方法1、XML格式<?xml version="1.0" encoding="utf-8"...未完，继续阅读→

今天碰到一个需要设置cookies当天23:59:59时失效的效果，此方法可以实现。//添加cookievar setCookie = function (c_name, value) { var curDate = new Date(); //当前时间戳 var curTamp = curDate.getTime(); //当日凌晨的时间戳,减去一毫秒是为了防止后续得到的时间不会达到00:00:00的状态 var curWeeHours = new Date(curDate.toLocaleDateString()).getTime() - 1; //当日已经过去的时间（毫秒） var passedTamp = curTamp - curWeeHours; //当日剩余时间 var leftTamp = 24 * 6...未完，继续阅读→