o0Luffy0o - 博客园

2012年5月16日

摘要： $(function(){ var $range = $("input[type='range']"); //滑块 var $result = $("output[name='result']");//显示数字的output var $button = $("input[type='button']");//清除按钮 $range.val(localStorage.rangeValue); //页面载入时$range的值为localStorage.rangeValue存诸的值； $res 阅读全文

posted @ 2012-05-16 15:12 o0Luffy0o 阅读(1998) 评论(0) 推荐(0) 编辑

html5-自定义元素属性data-和content的attr用法

摘要： <h2 class="h" data-zj="jy">我是自定义的属性</h2>h2[data-zj="jy"]{ color:#FFFF33;} h2[data-zj="jy"]:hover:after{ content:attr(data-zj);}1.data-是自定义属性的写法，后面接你的属性名字如：zj。2.h2[data-zj="jy"]通过CSS3的属性选择器来定义样式。3.结合:hover:after这两个伪类：让鼠标悬停在元素上面的时候，在其后面显示出自阅读全文

posted @ 2012-05-16 14:07 o0Luffy0o 阅读(6384) 评论(0) 推荐(0) 编辑

2012年5月15日

jQuery-锚链接滑动效果

摘要： $(function(){ $("ul li a").click(function(){ var hr = $(this).attr("href"); var anh = $(hr).offset().top; $("html,body").stop().animate({scrollTop:anh},2000); })})ul{ position:fixed; top:0; background:#999999; } ul li{ float:left; margin:10px; paddi... 阅读全文

posted @ 2012-05-15 11:04 o0Luffy0o 阅读(7281) 评论(2) 推荐(2) 编辑

CSS3 -- ::selection改变选择中文字的背景色

摘要： #btn::selection{ background:#930; } #btn::-moz-selection{ background:#930; }浏览器默认的颜色通常是蓝色，这个CSS样式可以自定义这个颜色。阅读全文

posted @ 2012-05-15 10:07 o0Luffy0o 阅读(365) 评论(0) 推荐(0) 编辑

CSS3 -- 常用方法Transform,Transition,Animationy

摘要： Transform transform:rotate()：含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。 .demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)} transform:skew()：含义：倾斜； .demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)} transform:scale()：含义：比例；“1.5”表示以1.5的比例放大，如... 阅读全文

posted @ 2012-05-15 09:38 o0Luffy0o 阅读(2942) 评论(0) 推荐(0) 编辑

2012年5月14日

Css--input输入框点击时去掉外框outline:medium;(chrome)

摘要： .search input[type='search']{ background:no-repeat 0 0 scroll #EEEEEE; border:none; outline:medium;}在chrom浏览器下面，点击input输入时，会有边框，在样式中使用：outline:medium;就不会有了。阅读全文

posted @ 2012-05-14 11:39 o0Luffy0o 阅读(6340) 评论(0) 推荐(0) 编辑

CSS --clip绝对定位元素的裁剪(隐藏该元素)

摘要： <form action="" name="" id="" role="search" method="get"> <fieldset class="search"> <label class="assistive-text" for="s">Search</label> <input type="search" name="s" id=&qu 阅读全文

posted @ 2012-05-14 11:24 o0Luffy0o 阅读(785) 评论(0) 推荐(0) 编辑

2012年5月11日

[转]--WAI-ARIA(role,aria-labelledby)无障碍网页应用（盲人等）

摘要：二、为什么需要ARIA？回答标题问题前我先问其他几个问题？如何让盲人用户知道当前浏览区域就是网站主导航？如果让盲人用户知道点击某个按钮后出来的是弹框？如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化？如何让盲人用户知道您使用了li标签是用来模拟标准select控件呢？如何让盲人用户知道您模拟的select控件是单选呢还是可以多选呢？在你现有的知识范围内，您有办法解决上面的问题吗？有人会说，我使用HTML5, 恩，确实，HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。因此，才需要ARIA.原文地址：http://www 阅读全文

posted @ 2012-05-11 13:42 o0Luffy0o 阅读(2165) 评论(0) 推荐(0) 编辑

html5-兼容IE6的结构

摘要： document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer');<!DOCTYPE HTML><html><head><me 阅读全文

posted @ 2012-05-11 13:37 o0Luffy0o 阅读(1036) 评论(0) 推荐(0) 编辑

CSS3 -- 动画animation可以多次点击

摘要： $(function(){ $("ul li").click(function(){ $("#btn").removeClass().addClass("shake"); var set = setTimeout(function(){ $("#btn").removeClass(); },1500) })})点击某元素，让另一个元素执行css3动画效果。但第二次再点击，就不能执行动画了。解决办法：setTimeout(function(){ $("#btn").removeClass()... 阅读全文

posted @ 2012-05-11 09:34 o0Luffy0o 阅读(5902) 评论(1) 推荐(0) 编辑

Luffy

Live well, love lots, and laugh often