我的日志-幸凡学习网

文章列表

发布时间：2016/3/28 13:27:20 阅读(6079)条评论(0)条

一、前言2010年写过一篇《js多个tab切换简单不需要在body内添加事件》的文章，近些年来从事前端事业以来，对于js的优化也是越来越关注，所以做了一些对tab事件的理解及优化，望大家吻喷。效果图如下：二、tab实现的思路1、首页是tab菜单及tab内容的理解是一一对应关系，而且位置是顺序是固定的也就是说当前第几个tab菜单对应的是第几个tab内容，这样是为了省略很多参数及不必要的HTML代码；2、js控制tab菜单：对于tab菜单而言,只需要控制点击后的菜单为当前选中效果，然后其它的菜单则是默认的没有选中效果；3、js控制tab内容：对于tab内容...未完，继续阅读→
关键字：特效 js 优化

Web前端性能优化——编写高效的JavaScript

发布时间：2016/3/26 14:37:14 阅读(5482)条评论(0)条

前言随着计算机的发展，Web富应用时代的到来，Web 2.0早已不再是用div+css高质量还原设计的时代。自Gmail网页版邮件服务的问世开始，Web前端开发也开启了新的纪元。用户需求不断提高，各种新的技术层出不穷，前端工程师的地位也越来越重要。然而任何事物都是有两面性的，随着前端技术的发展，前端业务越来越繁重，这大大增加了JS代码量。因此，要提高Web的性能，我们不仅需要关注页面加载的时间，还要注重在页面上操作的响应速度。那么，接下来我们讨论几种能够提高JavaScript效率的方法。一、从JavaScript的作用域谈起当JavaS...未完，继续阅读→
关键字：js 优化前端

css图片文字水平垂距中

发布时间：2016/3/17 22:16:22 阅读(5745)条评论(0)条

一、本文概述想必大家在做效果的时候经常会碰到文字会垂直距中的效果，单行、多行混合的情况，单行距中已无问题，height,line-height又或者padding:上下相同即可。在网上搜索到不少资料，本人实践后的经验是父级标签属性：display:table-cell;vertical-align:middle;距中标签元素：vertical-align:middle;display: inline-block;使用以上两个技巧即可以使得标签内的文字或图片垂直距中。当然这些使用的同时会有些属性会干扰到垂直距中，如：position中的absolute,fix（定位）,和flaot中的left,right（浮动）如果还有其它属性请通知我!...未完，继续阅读→
关键字：css 图片文字距中

手机端加载资源特效代码及完整实例

发布时间：2016/3/11 15:54:03 阅读(5649)条评论(0)条

在做h5移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是不利于用户体验。抛开网速的原因，解决这个问题有多方面的思路：最基本的，要从http请求合并，缓存管理，图片压缩等方面做性能优化；另外就是可以对页面里用到的所有图片做预加载的处理，当用户打开页面的时候不立即显示第一屏，而是先显示资源加载效果，等到加载完毕，再来显示页面的主内容，这样就能解决那个问题。虽然这种加载效果占用了用户的浏览时间，但是我们可以把它做的好看有趣一点，所以也不会影响...未完，继续阅读→
关键字：手机特效加载

利用css3-animation来制作逐帧动画

发布时间：2016/3/9 21:14:30 阅读(6871)条评论(0)条

css3我在5年之前就有用了，包括公司项目都一直在很前沿的技术。最近在新的项目中,用了大量的css3动画，但是真的沉淀下来仔细的去深入css3动画的各个属性发现还是很深的，这里就写下关于帧动画steps属性的理解我们知道css3的animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-modeanimation-timing-function其中1-7大多都有介绍，但是animation-timing-function是控制时间的属性在取值中除了常用到的三次贝塞尔曲线以...未完，继续阅读→
关键字：css3 animation 动画

.Net 高效开发之不可错过的实用工具

发布时间：2016/3/6 21:22:44 阅读(4945)条评论(0)条

工欲善其事，必先利其器，没有好的工具，怎么能高效的开发出高质量的代码呢？本文为各ASP.NET 开发者介绍一些高效实用的工具，涉及SQL 管理，VS插件，内存管理，诊断工具等，涉及开发过程的各个环节，让开发效率翻倍。 Visual StudioVisual Studio Productivity Power tool: VS 专业版的效率工具。Web Essentials: 提高开发效率，能够有效的帮助开发人员编写CSS， JavaScript, HTML 等代码。MSVSMON: 远程Debug 监控器 (msvsmon.exe) 是一种轻量级的应用程序，能够远程控制VS来调试程序。在远程调试期间，VS 在调试主机...未完，继续阅读→
关键字：net 工具

js获取触屏版当前滚动条移动完之后的位置

发布时间：2016/1/28 12:22:16 阅读(10029)条评论(0)条

前不久写过一篇关于上拉加载的文章【jq滚动到底部自动加载数据实例】，使用挺流畅的，但是使用过程也是令人心酸的，加载完后点击一产品个进去后，发现返回时还是重新加载而且是置顶，也就是说前面加载的内容白加载了，针对于这个BUG我看了很多网站都存在这个问题，http://m.suning.com也会，taobao返回可以到达加载后的效果,但是数据依然是重新加载。按我解理的思路应该是他在跳转到详细页面的时候可能保存两个值：1、是滚动条的高度，2、最后加载的页数。这样一来页面返回的时候只需要调用这两个值再进行处理就可以达到效果了，但是我...未完，继续阅读→
关键字：js 移动滚动条

在javascript中event的target和currentTarget的区别

发布时间：2015/12/17 11:47:06 阅读(5369)条评论(0)条

avaScript的event对象中event.target指代的是:触发事件的元素event.currentTarget指代的是:事件绑定的元素<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="test"> <span>aaa</span> <span>bbb</span> <span>ccc</span> </div> <...未完，继续阅读→
关键字：js event

jq多图片展示局部放大特效

发布时间：2015/11/4 20:59:37 阅读(7345)条评论(0)条

1、开篇：本实例主要是结合了小图片左右滚动和一个图片放大的特效。想偷懒的偷去用，也可以根据需求完善成你自己想的的效果。（文章底部附源文件下载）2、效果如下图所示3、Html源代码如下：<!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="text/html; charset=utf-8" />...未完，继续阅读→
关键字：jq 图片放大，滚动

CSS定位属性之间的相互作用

发布时间：2015/10/28 17:27:41 阅读(5186)条评论(1)条

1. 引言原文：bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT译者：爱前端，乐分享的FedFun，前端痴王海庆的博客。译言：来看下CSS标布局情况下，定位相关属性之间的相互作用，意译为主，不当之处敬请指正。阅读建议5分钟。2. 正文在定位元素时，我们经常用到四个属性display、position、float和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性，一些特殊的值组合会覆盖其他属性的应用，这些组合有：display: noneposition: absolute或position: fixedfloat: left或float: rightposition: static接...未完，继续阅读→
关键字：css

超酷的menu菜单当前效果及鼠标指向效果

发布时间：2015/10/16 17:23:15 阅读(6469)条评论(0)条

本实例效果是由jQuery实现的超牛的背景移动导航菜单效果，菜单效果设计非常沉稳大方,鼠标悬停时菜单项高亮显示。难点在一个要选中为当前效果同时指向子菜单时又不失去当前效果。本实例效果图如下：源代码如下：<!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="text/html; ch...未完，继续阅读→
关键字：菜单特效 js

关于移动端font-size思考前端设计稿与工作流

发布时间：2015/10/15 13:41:47 阅读(6823)条评论(0)条

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。阅读目录1. 问题的引出2. 简单问题简单解决3. 网易的做法4. 淘宝的做法5. 比较网易与淘宝的做法6. 如何与设计协作7. 总结1. 问题的引出最近阅读白树的博文《移动web资源整理》时，他在博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-s...未完，继续阅读→
关键字：前端 web 字体设计

如何解决手机版 uc 浏览器不能复制内容的bug

发布时间：2015/10/13 17:24:31 阅读(29932)条评论(0)条

做手机版网页的时候发现使用UC浏览器的时候不能手动复制内容的Bug 一直找也找不到问题。然后就自己从页面找问题发现页面有使用<meta name="browsermode" content="application"/>时UC 浏览器不能复制网页中的内容。所以在这里记录下来。希望能帮助到那些碰到过一样问题的朋友提个醒。顺便在这里贴一个我使用的手机默认设置<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/><meta name=&qu...未完，继续阅读→
关键字：网页浏览器复制

js判断网页是不是在微信内打开

发布时间：2015/10/12 14:49:09 阅读(9378)条评论(0)条

做微信站点的开发的时候，我们有需求只允许微信来访问网页。可行的一种方法是按照浏览器UA来判断是否是微信。下面是我抓取到的UA：Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12A365 MicroMessenger/5.4.1 NetType/WIFI我们可以通过MicroMessenger关键词来判断是否是微信了。方法如下：js方法function is_weixin(){ var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger"){ return true; }else{ return fa...未完，继续阅读→
关键字：js 微信浏览器

js动态获取图片长宽尺寸（通用性好，兼容所有浏览器）

发布时间：2015/9/30 16:50:08 阅读(6629)条评论(0)条

lightbox类效果为了让图片居中显示而使用预加载，需要等待完全加载完毕才能显示，体验不佳（如filick相册的全屏效果）。javascript无法获取img文件头数据，真的是这样吗？本文通过一个巧妙的方法让javascript获取它。这是大部分人使用预加载获取图片大小的例子：var imgLoad = function (url, callback) {var img = new Image();img.src = url;if (img.complete) {callback(img.width, img.height);} else {img.onload = function () {callback(img.width, img.height);img.onload = null;};};};可以看到上面必须等待图片加载完...未完，继续阅读→
关键字：js 图片尺寸插件

web app模拟checkbox与radio实例代码下载

发布时间：2015/9/23 17:27:19 阅读(7422)条评论(0)条

一、开篇现在经常可以在网络上看到一些非常奇特的表单元素，例如Checkbox复选框和Radiobox单选框，而且更让人蛋疼的是各个浏览器的样式还不统一，今天做了一个用标签模拟checkbox与radio的实例，主要是是近做手机 web App时发现默认的样式很不好看。所以突然就做了下，先来看看预览图：二、主要思路模拟的作用是为了给用户更好的体验效果，在代码中使用的时候隐藏真实checkbox或radio按钮。然后用相关标签做效果并且结合JS实现真实的input与效果的值是统一的。如下源代码：<span class="label"><em cla...未完，继续阅读→
关键字：手机模拟 radio checkbox

jq时间轴超酷特效附实例下载

发布时间：2015/8/26 22:22:06 阅读(5462)条评论(0)条

本实例是一款非常实用的jquery 特效，实现了时间轴效果，应用场景很广，最适合用于描述公司成长历程，可以列出哪年公司的发展经历，整体看来非常简洁大气，以年份做为节点，可灵活设置左右滚动控制显示。效果真的不错。效果代码如下：实例链接：http://www.86y.org/DEMO/history/下载地址：http://pan.baidu.com/s/1mi0NEPy 密码: t165（完）未完，继续阅读→
关键字：jq 特效时间轴

jq滚动到底部自动加载数据实例

发布时间：2015/8/15 20:57:50 阅读(19944)条评论(3)条

一、功能描述：滚动下拉到页面底部加载数据是很多瀑布流网站的做法，本实例是固定数据，小菜总结记录之用，高手勿喷。首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的 height，jquery如下代码:$(window).scrollTop()+$(window).height()>=$(document).height();再给window绑定scroll事件来实现加载数据显示。本实例的主要是提供手机版使用所以使用了CSS3的旋转模拟图片加载效果。在实例中实现了自动判断是否已经具备滚动事件的条件，如果高度不足自动补充下一页，直接满足滚动事件能...未完，继续阅读→
关键字：jq 手机滚动加载

jq倒计时插件实例源码，特效切换

发布时间：2015/7/24 20:07:10 阅读(7220)条评论(0)条

本实例是由JQ库写的JQ倒计时实例，使用的是上下切换显示。使用方法简单易用。只是写法过程中使用的比较笨的方法，大家可以修改并改良本实例。本实例的思路是根据倒计时的时间分为：天时分秒，所以大块需要分开,然后每一块又要细分，具体到每个数字一个标签，然后对比哪些数据有变化然后切换变化的数字切换时需要另一个标签来做效果，但是另一个标签的值是旧值（说的不是很清楚，看的懂的）。使用方法非常简单支持自定义结束内容提示!代码如下：<div class="lefttime" date="2015-10-8 21:58:00" overtext=&qu...未完，继续阅读→
关键字：jq 插件

Newtonsoft.json解析多层Json 实例

发布时间：2015/7/3 13:31:40 阅读(16241)条评论(1)条

我使用的是Newtonsoft.Json(下载地址：http://download.csdn.net/detail/xinping_168/4710720)组件，看人家教程写着使用json解析还要先定义JSON里面每个字段的类型什么的感觉太麻烦了，也许序列转换比较方便。但是有时候我只需要获取里面的值就行了。那么可以使用我这个方法了。更简洁方便。json数据格式{'data': { 'personal': { 'name': '宋华勇', 'sex': '男','height':'175cm','age':'30','school&#...未完，继续阅读→
关键字：.net json 实例

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