摘要:
/** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta =... 阅读全文
摘要:
我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来。这是怎么实现出来的呢?
其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt Mlinac制作的YUI ImageLoader工具箱。
后来就形成了一个比较完整的jQuery插件:jquery.lazyload.js .
下面就介绍一下jquery.lazyload.js的使用方法:
Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_%e6%9c%aa%e6%a0%87%e9%a2%98-1.jpg)
摘要:
大家发现传统的收藏本站按钮在360浏览器下面没有效果了,但是360浏览器用户群却非常之大。所以我们在网上找到一个兼容所有浏览器的收藏本站解决方案,具体功能如下:
设为首页 和 收藏本站js代码 兼容IE,chrome,ff,360等
将以下代码放入页面或者新建js文件
//设为首页
function SetHome(obj,url){
try{
obj.style.behavior='url(#default#homepage)';
obj.setHomePage(url);
}catch(e){
if(window.netscape){
try{
netscape.security.PrivilegeManager.enable 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_44.jpg)
摘要:
Optimizely:在线网站A/B测试平台是一家提供 A/B 测试服务的公司。A/B 测试能够对比不同版本的设计,选取更吸引用户眼球的那一款,从而带来更为优化的个人体验。让网站所有者易于对不同版本的设计和内容进行测试。使用 Optimizely 时你只需要简单的添加一段 Javascript 代码,就能够给你的网站创造类似 A/B 的选择性测试(你可以对选择项进行设置,同时还能根据获得的选项分析出结果)。该服务自 2010 年 7 月份启动以来已经得到了不断的完善,并且增加了其他的功能,包括与 Google Analytics 的融... 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_012.jpg)
摘要:
在火狐、苹果、谷歌、欧鹏等主流浏览器中,select下拉表单的文字能够垂直居中,如图:而在ie8中,select下拉表单的文字基本就是靠底部显示,如图:那么,如何使得ie8下的select文字垂直居中呢?答案就是设置select{padding:5px 0;},如图:如果想使得select有一定的高 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_036.jpg)
摘要:
本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台。
本文内容大部分属于翻译性质内容,因此,会不那么通俗易懂。不过,你是做手机开发的,或是有意向的,本文的内容如果细细读来,还是有些收获的。
一、定义
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips
dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_%e6%9c%aa%e6%a0%87%e9%a2%9821.jpg)
摘要:
-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明
-webkit-user-select: none; 设置为无法选择文本
-webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片
:-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop)
div p :matches(em, b, strong) {} 使用mathes来匹配多个选择器
@media only screen and (max-width: 480px) {} 指定Mobile设备或者小屏幕桌面屏幕
@media (-webkit-min-device-pixel 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_%e6%9c%aa%e6%a0%87%e9%a2%98-21.jpg)
摘要:
css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好多资料,最好的解决办法也是大神们用js来模拟下拉表单。额~,好吧,暂且就按照大神们的办法来解决这个问题吧。
下边来说说css如何解决select的option高度的?
有时我们在设置了select的高度后,发现其option的高度还是默认的高度,跟我们设置的select的高度大相径庭 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_102.jpg)
摘要:
使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角且颜色由上而下渐变的样式,显得超级恶心,而且文本框也会有一定的圆角,但是我们自己定义 border-radius 也没有效果,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。此时的解决办法为:
input[type=submit],input[type=reset],input[type=button],input[type=text]{-webkit-appearance:none;}
其中,-webkit-appearance:none是去除input默认样式。
此时虽然去掉了按钮显示超大圆角以及颜色由上而下渐变的恶心样式,但按钮的圆角依然存在,所以还需在样式中加入:border-radius:0方可。注意,只能是border-radius:0;而不能 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_22.jpg)
摘要:
自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-Web App(意为基于WEB形式的应用程序)。业界关于Web App与Native App的争论已有一段时间,而Hybrid混合App则受到推荐,随着时间的推移,我们相信Web App也会有一定的市场,那么它到底有什么奥秘呢?让我们来看看。
WebApp与Native App有何区别呢?
Native App:
1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 阅读全文
![](http://images.cnblogs.com/cnblogs_com/tnnyang/628190/o_33.jpg)