前端大本营

HTML5,CSS3,Responsive,资料站
使用jquery的继承机制 对jquery 1.11.1版本 进行扩展 使其支持 $.browser 方法,已达到兼容之前组件的目的.
jQuery.extend({  
    browser: function()   
    {  
        var  
        rwebkit = /(webkit)\/([\w.]+)/,  
        ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,  
        rmsie = /(msie) ([\w.]+)/,  
        rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,      
        browser = {},  
        ua = window.navigator.userAgent,  
        browserMatch = uaMatch(ua);  
  
        if (browserMatch.browser) {  
            browser[browserMatch.browser] = true;  
            browser.version = browserMatch.version;  
        }  
        return { browser: browser };  
    },  
});  
  
function uaMatch(ua)   
{  
        ua = ua.toLowerCase();  
  
        var match = rwebkit.exec(ua)  
                    || ropera.exec(ua)  
                    || rmsie.exec(ua)  
                    || ua.indexOf("compatible") < 0 && rmozilla.exec(ua)  
                    || [];  
  
        return {  
            browser : match[1] || "",  
            version : match[2] || "0"  
        };  
}  
将以上代码 保存成 jquery-browser.js 使用即可
Tags: ,
Posted in 精彩内容 | Jquery 1.9.0 以上版本 扩展使用 $.browser 方法[转载]已关闭评论

首先现在比较流行的区别IE与其他浏览器的CSS写法,

条件判断式

这种方法旨在页面读取中使用相应的判断条件,让浏览器读取指定的CSS样式

<!--[if !IE]><!--> 除IE以外的浏览器都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE浏览器可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
稍作说明 ! 表示否,除了
lt 表示小于
lte 表示小于等于
gt 表示大于
gte 表示大于等于
( ) 优先计算
& 表示和,并且
| 表示或者
加载CSS2
<!--[if lt IE 9]>
加载CSS1(可以把要重写的写在这里).
<![endif]-->
以上内容均为了解即可, 这里告诉大家一个更有效的CSS写法,可以直接在样式表内,判断是否为IE浏览器。
@media all and (-ms-high-contrast:none){
   *******
}
简单吧,再不用为一个IE浏览器,来回在页内追加判断代码了
Tags: ,
Posted in CSS最新技术 | IE区别于其他浏览器的CSS代码写法。不使用判断条件式已关闭评论

本文参考了 http://www.zhangxinxu.com/wordpress/2015/01/chrome-absolute-display-visibility-render-bug/

在chrome中的样式是一个div 里面有两个子元素,含有float,并且含有position: absolute属性,其他浏览器都正常,
但在Chrome下,来回改变浏览器尺寸的时候,会出现浮动内容重影,位置不对的情况。参考了上面得文章,发现原来chrome一直存在着这么一个bug,
上文中为渲染表现BUG,我们先这面叫,到了大家最关心的地方,如何Hack这个问题,只要在你浮动的子元素或父元素上添加以下CSS即可解决。

-webkit-transform: translateZ(0); /* 没错,靠的就是你!*/
Posted in 精彩内容 | Chrome absolute绝对定位的BUG,导致浮动内容重影,位置不对已关闭评论

虽然CSS3已经流行很久了,但是总有一部分人还在使用IE8的浏览器。
没有办法,作为一个负责人的前端人员,总是要求满足客户的需求, 如何才能叫IE8 实现rgba的效果呢?

在IE8实现背景透明的效果
div{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
    background: rgba(0, 0, 0, 0.4);
}
div:not(:target){
    filter: none;
}
代码说明

利用IE以前制作过渡效果的代码,我们可以将起始颜色,和结束颜色设置为相同, 这样就可以实现半透明状态。
startColorstr=#66000000 其中66为透明度, 后面的000000为16进制的颜色代码
透明度的设置可以参考以下表格

透明度 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
00 1A 33 4D 66 80 99 B3 CC E6 FF

Tags: , ,
Posted in 本站原创 | 使用Hack,让IE8实现 rgba的效果已关闭评论
2017 08/02 周三

解密JavaScript闭包

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
对于JavaScript新手来说,闭包(Closures)是一个很神奇的东西。这篇博客将通过一个非常浅显的代码示例来解释闭包。

计数器

我们的目标是实现一个计数器,它的效果如下:

increment();  // Number of events: 1
increment();  // Number of events: 2
increment();  // Number of events: 3

可知,每次执行increment()都会输出“Number of events: N”,且N每次都会加1。

这个计数器最直观的实现方式如下:

var counter = 0;
function increment() 
{
  counter = counter + 1;
  console.log("Number of events: " + counter);
}

多个计数器

以上的代码非常简单。但是,当我们需要第二个计数器时,就会遇到问题了。当然,我们可以实现两个重复的计数器:

var counter1 = 0;
function incrementCounter1() 
{
  counter1 = counter1 + 1;
  console.log("Number of events: " + counter1);
}
var counter2 = 0;
function incrementCounter2() 
{
  counter2 = counter2 + 1;
  console.log("Number of events: " + counter2);
}
incrementCounter1();  // Number of events: 1
incrementCounter2();  // Number of events: 1
incrementCounter1();  // Number of events: 2

显然,以上的代码非常冗余,有待优化。当我们需要更多计数器时,使用这种方法将不太现实。这时,就需要神奇的闭包了。

使用闭包实现计数器

需要多个计数器,同时希望去除冗余代码的话,就可以使用闭包了:

function createCounter() 
{
  var counter = 0;
  function increment() 
  {
    counter = counter + 1;
    console.log("Number of events: " + counter);
  }
  return increment;
}
var counter1 = createCounter();
var counter2 = createCounter();
counter1(); // Number of events: 1
counter1(); // Number of events: 2
counter2(); // Number of events: 1
counter1(); // Number of events: 3

在代码中,我们创建了两个独立的计数器counter1与counter2,分别进行计数,互不干挠。代码看着有点奇怪,我们不妨拆分起来分析。

首先,我们来看看createCounter:
创建了一个局部变量counter
创建了一个局部函数increment(),它可以对counter变量进行加1操作。
将局部函数increment()返回。注意,返回的是函数本身,而不是函数调用的结果。
看起来,createCounter()函数与我们最初定义的计数器非常相似。唯一的不同点在于:createCounter()将计数器封装在一个函数内,于是我们将它称作闭包。

难以理解的一点在于,当我们使用createCounter()函数创建计数器时,实际上创建了一个新的函数:

// fancyNewCounter是一个新创建的函数
var fancyNewCounter = createCounter();

闭包的神奇之处在于。每次使用createCounter()函数创建计数器increment时,都会创建一个对应的counter变量。并且,返回的increment函数会始终记住counter变量。

更重要的是,这个counter变量是相互独立的。比如,当我们创建2个计数器时,每个计数器都会创建一个新的counter变量:

// 每个计数器都会从1开始计数
var counter1 = createCounter();
counter1(); // Number of events: 1
counter1(); // Number of events: 2
// 第1个计数器不会影响第2个计数器
var counter2 = createCounter();
counter2(); // Number of events: 1
// 第2个计数器不会影响第1个计数器
counter1(); // Number of events: 3

为计数器命名

多个计数器的输出信息都是“Number of events: N”,这样容易混淆。如果可以为每个计数器命名,则更加方便:

var catCounter = createCounter("cats");
var dogCounter = createCounter("dogs");
catCounter(); // Number of cats: 1
catCounter(); // Number of cats: 2
dogCounter(); // Number of dogs: 1

通过给createCounter传递一个新的counterName参数,可以很容易地做到这一点:

function createCounter(counterName) 
{
  var counter = 0;
  function increment() 
  {
    counter = counter + 1;
    console.log("Number of " + counterName + ": " + counter);
  }
  return increment;
}

这样,createCounter()函数返回的计数器将同时记住两个局部变量:counterName与counter。

优化计数器调用方式

按照之前的实现方式,我们通过调用createCounter()函数可以返回一个计数器,直接调用返回的计数器就可以加1,这样做并不直观。如果可以如下调用将更好:

var dogCounter = createCounter("dogs");
dogCounter.increment(); // Number of dogs: 1

实现代码:

function createCounter(counterName) 
{
  var counter = 0;
  function increment() 
  {
    counter = counter + 1;
    console.log("Number of " + counterName + ": " + counter);
  };
  return { increment : increment };
}

可知,以上的代码返回了一个对象,这个对象包含了一个increment方法。

添加decrement方法

现在,我们可以给计数器添加一个decrement()方法

function createCounter(counterName) 
{
  var counter = 0;
  function increment() 
  {
    counter = counter + 1;
    console.log("Number of " + counterName + ": " + counter);
  };
  function decrement() 
  {
    counter = counter - 1;
    console.log("Number of " + counterName + ": " + counter);
  };
  return {
    increment : increment,
    decrement : decrement
  };
}
var dogsCounter = createCounter("dogs");
dogsCounter.increment(); // Number of dogs: 1
dogsCounter.increment(); // Number of dogs: 2
dogsCounter.decrement(); // Number of dogs: 1

添加私有方法

前面的代码有两行重复的代码,即console.log语句。因此,我们可以创建一个display()方法用于打印counter的值:

function createCounter(counterName) 
{
  var counter = 0;
  function display() 
  {
    console.log("Number of " + counterName + ": " + counter);
  }
  function increment() 
  {
    counter = counter + 1;
    display();
  };
  function decrement() 
  {
    counter = counter - 1;
    display();
  };
  return {
    increment : increment,
    decrement : decrement
  };
}
var dogsCounter = createCounter("dogs");
dogsCounter.increment(); // Number of dogs: 1
dogsCounter.increment(); // Number of dogs: 2
dogsCounter.decrement(); // Number of dogs: 1

看起来,display()函数与increment()函数以及decrement()函数差不多,但是其实它们很不一样。我们并没有将display()函数添加到返回的对象中,这就意味着以下代码会出错:

var dogsCounter = createCounter("dogs");
dogsCounter.display(); // ERROR !!!

这时,display()相当于一个私有方法,我们只能在createCounter()函数内使用它。

闭包与面向对象编程

如果你接触过面向对象编程(OOP),则应该不难发现本文中所涉及的内容与OOP中的类、对象、对象属性、共有方法与私有方法等概念非常相似。
闭包,与OOP相似,就是把数据和操作数据的方法绑定起来。因此,在需要OOP的时候,就可以使用闭包来实现。

总结

闭包(Closure)是JavaScript一个非常棒的特性。掌握它,我们可以从容应对一些常见的编程需求。

版权声明: 转载时请注明作者Fundebug以及本文地址: https://blog.fundebug.com/2017/07/31/javascript-closure/
Posted in 精彩内容 | 解密JavaScript闭包已关闭评论

在使用这个插件的时候, 出现很多的问题,首先就是网上大家都遇到的只显示工具栏,没有按钮的问题(iOS开发)。
多处查找资料,最后还是在国外的网站上发现了解决方法,国内的说明很多都失效或是干脆没用。

无按钮解决方法
var ref = cordova.ThemeableBrowser.open(url, '_blank', {
                statusbar: {
                    color: '#ffffff00'  #元代码为#ffffffff,导致状态栏纯白什么也看不见。最后两位为透明度设置。
                },
                toolbar: {
                    height: 44,
                    color: '#f0f0f0ff'
                },
                title: {
                    color: '#003264ff',
                    showPageTitle: true
                },
                backButton: {
                    wwwImage: 'img/back@2x.png',  #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImagePressed: 'img/back_pressed.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    width: 15,
                    height: 22,
                    align: 'left',
                    wwwImageDensity: 1,
                    event: 'backPressed'
                },
                forwardButton: {
                    wwwImage: 'img/forward@2x.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImagePressed: 'img/forward_pressed@2x.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImageDensity: 1,
                    align: 'right',
                    event: 'forwardPressed'
                },
                backButtonCanClose: true
            }).addEventListener('backPressed', function(e) {
                //alert('back pressed');
            }).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
                console.error(e.message);
            }).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
                console.log(e.message);
            }).addEventListener('loadstop', function(event) {
                // login & passの保存
                var set_login = 'localStorage.setItem("login", $("#user_login").val() );';
                var set_pass = 'localStorage.setItem("pass", $("#user_pass").val() );';
                ref.executeScript({ code: '$("#wp-submit").click(function(){' + set_login + set_pass + '});' });
            });

看了我代码里的说明还不赶快去试试。

附带插件地址

Posted in Monaca App开发, 本站原创 | PhoneGap的 In-App Browsers扩展插件 ThemeableBrowser插件的使用方法已关闭评论

6月底刚结束佳X公司的产品公布,紧接着7月份又接到一份制作产品比较的MiniSite任务。任务说起来也不难,一份excel表,一个xd原型设计。接着就是经理Barabara的讲了一堆(好似没记住)。项目内容

  1. 制作两个页面,一个是产品列表,总共13个产品。一个是比较结果页面。
  2. 两个页面均要对要对应Responsive(响应式设计)
  3. 产品列表页要求首部要一个整屏banner, banner中间有一个一直居中的标题。点里面的Get Started按钮自动翻篇到下面的列表
  4. 产品列表部分,每一个产品都有一个compare按钮,单击后产品反转,背景发生改变及Compare按钮的名称改为Selected,并在页面的下面做一个固定的显示几个被选中的提示栏
  5. 下面的提示栏有一个按钮,单击后会转到比较结果页面,并将选中的产品ID传给比较结果页面
  6. 比较结果页面,要求使用Ajax技术,根据产品ID,获得产品资料
  7. 比较结果页面,要求可以手动拖拽页面
  8. 比较结果页面,要求有帮助功能。及顶部固定提示产品名称栏
7月7日

一天将PC版的展示做了出来,当然功能没有做。本来这里打算用BootStrap, 后来觉得用框架用的太多,好久没自己手写了。索性来了一把手写Responsive

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EOS Compare</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--Responsive的关键部分,控制屏幕缩小后的显示比例-->
<meta name="WT.cg_abc" content="">
<meta name="WT.cg_refer" content="">
<!-- 由于没有太多需要打开页面就加载的内容js不放在这里影响速度-->
<link href="css/site.css" rel="stylesheet" />   <!--本人的样式表->
</head>

<body>
*******省略*******
</body>
</html>
这里遇到第一个问题,产品列表页打开后,有一个整屏,内容上下左右居中。

为了保证能够整屏, 我把html, body, section_top, top_banner都设成了100%高度。背景图片要一直居中,所以设置了一个居中背景,之前说的难点上下左右居中,设置了元素的高宽,position设置成absolute后,就简单了。top:0; right=0; bottom:0; left:0; margin:auto; 这回去看看吧,不论在什么情况下这个元素都居中。这里没有太多的难点

HTML
<div class="section_top">
    <div class="header">
        <div class="h_logo"><img src="img/logo.png" alt="" title=""></div>
        <div class="sub_logo"><img src="img/sub_logo.png" alt="" title=""></div>
        <div class="mb0"></div>
    </div>
    <div class="top_banner">
        <div class="top_in">
            <h1 class="size60 pb20">EOS COMPARE</h1>
            <a href="#camera" class="blue_bg button size24">Get started</a>
        </div>
    </div>
</div>
CSS
body{font:14px/1.2 'RyomCN-sanserif-li', 'Microsoft Yahei', Arial, Helvetica, SimHei, san-serif; color: #333; height: 100%;}
html,body{*background-image:url(#); background-attachment:fixed;} /*background-attachment:fixed 设置这个可以防止absolute做伪fixed时抖动的问题,其实这里没有任何关系*/
a{color: #FFF; text-decoration: none;}
/*INDEX PAGE*/
.contriant{min-height: 100%;}
.header{position:relative; z-index: 1;}
.header .h_logo{float: left; margin: 20px 0 0 30px;}
.header .sub_logo{float: right; margin: 25px 30px 0 0;}
.section_top{width: 100%; min-height: 100%; position: relative; display: block; box-sizing: border-box;}
.top_banner{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/top.jpg) no-repeat center; background-size:cover;} /*做一个一直居中的背景,并随着屏幕的尺寸自动调整*/
.top_banner h1{color: #FFF; font-weight: normal;}
.top_in{height: 140px; text-align: center; width: 1024px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

接下来制作四列产品列表,这里的问题出自于如何做一个统一格式的列表框,不用切割。我的想法就是大家左右上下都设10px的margin,背景是白色居中 + 响应式设计基本没问题。

<div class="camera_list" id="camera">
            <div class="col-4 center">
                <img class="pb10" src="img/80d.png" alt="eos 80d" />
                <img class="pb30" src="img/80d_logo.png" alt="eos 80d" />
                <a data-id="1" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/77d.png" alt="eos 77d" />
                <img class="pb30" src="img/77d_logo.png" alt="eos 77d" />
                <a data-id="2" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/800d.png" alt="eos 800d" />
                <img class="pb30" src="img/800d_logo.png" alt="eos 800d" />
                <a data-id="3" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/760d.png" alt="eos 760d" />
                <img class="pb30" src="img/760d_logo.png" alt="eos 760d" />
                <a data-id="4" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/750d.png" alt="eos 750d" />
                <img class="pb30" src="img/750d_logo.png" alt="eos 750d" />
                <a data-id="5" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/700d.png" alt="eos 700d" />
                <img class="pb30" src="img/700d_logo.png" alt="eos 700d" />
                <a data-id="6" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/200d.png" alt="eos 200d" />
                <img class="pb30" src="img/200d_logo.png" alt="eos 200d" />
                <a data-id="7" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/100d.png" alt="eos 100d" />
                <img class="pb30" src="img/100d_logo.png" alt="eos 100d" />
                <a data-id="8" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/1300d.png" alt="eos 1300d" />
                <img class="pb30" src="img/1300d_logo.png" alt="eos 1300d" />
                <a data-id="9" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m5.png" alt="eos m5" />
                <img class="pb30" src="img/m5_logo.png" alt="eos m5" />
                <a data-id="10" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m6.png" alt="eos m6" />
                <img class="pb30" src="img/m6_logo.png" alt="eos m6" />
                <a data-id="11" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m3.png" alt="eos m3" />
                <img class="pb30" src="img/m3_logo.png" alt="eos m3" />
                <a data-id="12" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m10.png" alt="eos m10" />
                <img class="pb30" src="img/m10_logo.png" alt="eos m10" />
                <a data-id="13" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="mb0 pb40"></div>
        </div>
.col-4{width: 236px; height: 260px; margin: 10px; border-radius: 7px; border: 1px solid #CCC; float: left; padding: 0; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.col-4.gray_bg{transform: rotateY(360deg);}

样式表简单说明 border-radius圆角, transform-style: preserve-3d设置3D旋转,速度定为0.8秒内完成 cubic-bezier自定义过渡效果 rotateY(360deg) Y轴360度旋转

Posted in 本站原创 | 【项目1】产品比较页面已关闭评论

一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding、Border 与 Margin 的宽度,四个加起来才是 div 真正占有的宽度。
JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)全都有了!

var content = $(‘div’). width();//只是获取content宽度
var contentWithPadding = $(‘div’). innerWidth();//获取content+padding的宽度
var withoutMargin = $(‘div’). outerWidth();//获取content+padding+border的宽度
var full = $(‘div’). outerWidth(true);//获取content+padding+border+margin的宽度

宽度与高度概念一样,只差水平与垂直向而已。

Margin 有个特色,就是当两个有 margin的 div 靠在一起时,两个 div 紧邻的 margin 不是相加,而是取其大者,举例来说,两个 10px margin 的 div 并在一起只会有 10px margin 的距离,若是一个 20px margin,另一个为 10px margin,则会有 20px 的 margin。

但是获取当前元素的全部宽度的时候,还是获取自身的margin+content+padding+border的值。
Tags:
Posted in 精彩内容 | jQuery 获取 div 宽度与高度(width,padding,margin,border)已关闭评论

使用过苹果Mac系统的人都知道Dock导航, 我们利用CSS3的过渡创建一个Dock导航

示例
CSS代码
body {
	margin: 0;
	padding: 0;
	font: normal 14px/1.5 "PT Sans", Helvetica, Arial, sans-serif;
	background: rgb(30, 30, 30);
	color: rgb(220, 220, 220);
}

.wrapper {
	position: absolute;
	top: 48%;
	left: 50%;
	width: 660px;
	height: 340px;
	margin: -190px 0 0 -330px;
}

.content {
	position: relative;
	width: 660px;
	height: 340px;
	overflow: hidden;		
	background: rgb(15, 15, 15) url(images/bg.jpg) no-repeat center bottom;
	border-radius: 10px;
	box-shadow: 0 1px 10px rgb(10, 10, 10);
}

h1 {
	margin-top: 1.5em;
	color: rgba(255, 255, 255, .9);
	line-height: 1;
	font-size: 70px;
	text-align: center;
	font-weight: bold;
	text-shadow: 0px 1px 5px rgb(255, 160, 55), 0px 1px 15px rgb(255, 160, 55);
	cursor: default;
}

h1 em {
	display: inline-block;
	font-size: .29em;
	font-style: normal;
	vertical-align: top;
	margin-left: -.4em;
	padding-top: .46em;
}

/* css dock style*/
@-webkit-keyframes bounce {
	  0% { -webkit-transform: translateY(0); }
	100% { -webkit-transform: translateY(-20px); }
}

@-moz-keyframes bounce {
	  0% { -moz-transform: translateY(0); }
	100% { -moz-transform: translateY(-20px); }
}
@-o-keyframes bounce {
	  0% { -o-transform: translateY(0); }
	100% { -o-transform: translateY(-20px); }
}

@-ms-keyframes bounce {
	  0% { -ms-transform: translateY(0); }
	100% { -ms-transform: translateY(-20px); }
}
@keyframes bounce {
	  0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
}

.dock {
	position: absolute;
	bottom: 0;
	z-index: 10;
	width: 100%;
	text-align: center;
	font: normal 14px/1 'Lucida Grande', Arial, sans-serif;
}

.dock ul {
	position: relative;
	display: inline-block;
	padding: 0 5px;
	margin: 0;
}
.dock li {
	display: inline-block;
	position: relative;
	margin: 0 1px;
	margin-bottom: 15px;
	vertical-align: baseline;
	-webkit-box-reflect: below -16px -webkit-gradient(
		linear, left top, left bottom,
		from(transparent),
		color-stop(91%, rgba(255, 255, 255, .1)),
		color-stop(91.01%, transparent),
		to(transparent)
	);
}

.dock a {
	display: inline-block;
	cursor: default;
	outline: none;
}
.dock li:target a {
	-webkit-animation: bounce .3s 6 alternate ease-out;
	-moz-animation: bounce .3s 6 alternate ease-out;
	-o-animation: bounce .3s 6 alternate ease-out;
	-ms-animation: bounce .3s 6 alternate ease-out;
	animation: bounce .3s 6 alternate ease-out;
}
.dock li:after {
	content: " ";
	position: absolute;
	bottom: -5px;
	left: 50%;
	width: 5px;
	height: 5px;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(255, 255, 255, .8);
	margin-left: -2px;
	border-radius: 5px;
	box-shadow:
		inset 0 1px 3px rgba(75, 255, 255, .4),
		0 0 4px rgba(75, 255, 255, .5),
		0 -1px 7px rgb(75, 255, 255);
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
	-ms-transition: opacity .5s;
	transition: opacity .5s;
}
.dock li:target:after {
	visibility: visible;
	opacity: 1;
}
.dock em {
	position: absolute;
	top: -34px;
	left: 50%;
	display: none;
	width: 150px;
	margin-left: -75px;
	text-align: center;
}
.dock em:after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(0, 0, 0, .6);
	border-bottom: none;
}
.dock em span {
	display: inline-block;
	padding: 5px 12px;
	font-size: 14px;
	font-style: normal;
	color: #FFF;
	background: #000;
	background: rgba(0, 0, 0, .6);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
	border-radius: 12px;
}

.dock li:hover em, 
.dock li a:focus em {
	display: block;
}
.dock img {
	width: 86px;
	height: auto;
	border: none;
	-webkit-transition: width .2s, height .2s;
	-moz-transition: width .2s, height .2s;
	-o-transition: width .2s, height .2s;
	-ms-transition: width .2s, height .2s;
	transition: width .2s, height .2s;
}

.dock li:hover img, 
.dock li a:focus img {
	width: 96px;
}

.dock li:active img {
	opacity: .9;
}	
.dock-container {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.dock-panel {
	width: 560px;
	height: 100px;
	background: -webkit-linear-gradient(to bottom, #eee 0%, #eee 28%,#bbb 51%,#bbb 100%);
	background: linear-gradient(to bottom, #eee 0%, #eee 28%,#bbb 51%,#bbb 100%);
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-moz-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-o-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-ms-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	position: relative;
	left: 50%;
	margin-left: -280px;
	bottom: -50px;
}
HTML代码
<div class="wrapper">
		<div class="content">
			<h1>CSS Dock</h1>
			<div class="dock">
				<ul>
					<li id="mail">
						<a href="#mail">
							<em><span>Mail</span></em>
							<img src="images/icon-mail.png" alt="Mail">
						</a>
					</li>
					<li id="ical">
						<a href="#ical">
							<em><span>iCal</span></em>
							<img src="images/icon-ical.png" alt="iCal">
						</a>
					</li>
					<li id="addressbook">
						<a href="#addressbook">
							<em><span>Address Book</span></em>
							<img src="images/icon-addressbook.png" alt="Address Book">
						</a>
					</li>
					<li id="iphoto">
						<a href="#iphoto">
							<em><span>iPhoto</span></em>
							<img src="images/icon-iphoto.png" alt="iPhoto">
						</a>
					</li>
					<li id="idisk">
						<a href="#idisk">
							<em><span>iDisk</span></em>
							<img src="images/icon-idisk.png" alt="iDisk">
						</a>
					</li>
				</ul>
			</div>
			<div class="dock-stage">
					<div class="dock-container">
						<div class="dock-panel"></div>
					</div>
				</div>
		</div>
	</div>
Tags:
Posted in CSS最新技术 | CSS3 过渡创建 Dock 导航已关闭评论
2017 06/23 周五

CSS3 制作旋转按钮

利用CSS3的变形属性,我们可以制作很多原来只能用Flash才能做出来的效果
比如今天展示的这些按钮都是通过CSS3和简单的图片就可以实现的

示例
CSS代码
ul:before,
ul:after {
	display: table;
	content: "";
}
ul:after {
	clear: both;
	overflow: hidden;
}

ul {
	zoom: 1;
	list-style: none outside none;
	margin-bottom: 30px;
}

ul li {
	float: left:
	margin: 10px;
}
ul a {
	display: block;
	float: left;
	text-decoration: none;
}
ul img {
	border: 0;
}
h1 {
	margin: 2em 0;
}

#socialicons img,
#socialicons2 img{ 
	-moz-transition: all 0.8s ease-in-out;
	-webkit-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

#socialicons img:hover{
	-moz-transform: rotate(360deg) scale(1.5);
	-webkit-transform: rotate(360deg) scale(1.5);
	-o-transform: rotate(360deg) scale(1.5);
	-ms-transform: rotate(360deg) scale(1.5);
	transform: rotate(360deg) scale(1.5);
}



#socialicons2 img:hover{ 
	-moz-transform: rotate(-360deg) scale(.7);
	-webkit-transform: rotate(-360deg) scale(.7);
	-o-transform: rotate(-360deg) scale(.7);
	-ms-transform: rotate(-360deg) scale(.7);
	transform: rotate(-360deg) scale(.7);
}

HTML代码
<ul id="socialicons">
	<li><a href="#"><img src="images/rss.png" alt="" /></a></li>
	<li><a href="#"><img src="images/delicious.png" alt="" /></a></li>
	<li><a href="#"><img src="images/facebook.png" alt="" /></a></li>
	<li><a href="#"><img src="images/twitter.png" alt="" /></a></li>
	<li><a href="#"><img src="images/yahoo.png" alt="" /></a></li>
</ul>
<h1>逆时针旋转360度缩小0.7倍</h1>
<ul id="socialicons2">
	<li><a href="#"><img src="images/rss.png" alt="" /></a></li>
	<li><a href="#"><img src="images/delicious.png" alt="" /></a></li>
	<li><a href="#"><img src="images/facebook.png" alt="" /></a></li>
	<li><a href="#"><img src="images/twitter.png" alt="" /></a></li>
	<li><a href="#"><img src="images/yahoo.png" alt="" /></a></li>
</ul>
Tags: ,
Posted in CSS最新技术 | CSS3 制作旋转按钮已关闭评论