绚丽而实用的jQuery/CSS3应用及源码

HTML5加入WEB以后，网页世界就变得丰富绚丽起来了，但是我们在项目应用中，不仅需要绚丽的动画效果，而且更需要有实用的价值。今天分享的一些jQuery/CSS3应用不仅绚丽，而且还比较实用，如果感兴趣，可以应用到自己的项目中。

纯CSS3垂直动画菜单 效果很酷

这是很动感的CSS3动画菜单，垂直方向的，并且支持多级下拉。

核心CSS代码：

.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*height: 100px;*/
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;

  /* == */
  width: 250px;
  /* == */
}
.mcd-menu li {
  position: relative;
  /*float:left;*/
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  color: #777;
  /*text-align: center;
  border-right: 1px solid #E7E7E7;*/

  /* == */
  text-align: left;
  height: 36px;
  position: relative;
  border-bottom: 1px solid #EEE;
  /* == */
}
.mcd-menu li a i {
  /*display: block;
  font-size: 30px;
  margin-bottom: 10px;*/

  /* == */
  float: left;
  font-size: 20px;
  margin: 0 10px 0 0;
  /* == */

}
/* == */
.mcd-menu li a p {
  float: left;
  margin: 0 ;
}
/* == */

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;

  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  /*border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;*/
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;

  /* == */
  border-left: 4px solid #e67e22;
  border-right: 4px solid #e67e22;
  margin: 0 -4px;
  /* == */
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  /*top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/

  /* == */
  top: 42%;
  left: 0;
  border-left: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* == */
}

/* == */
.mcd-menu li a.active:after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-right: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* == */

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*border-top: 4px solid #e67e22;*/
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  /*top: 130px;*/
  z-index: 1000;

  /* == */
  left:280px;
  top: 0px;
  border-left: 4px solid #e67e22;
  /* == */
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  /*top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/

  /* == */
  top: 25px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  /* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  /*top: 100px;*/

  /* == */
  left:250px;
  /* == */
}
/*.mcd-menu li ul li {
  float: none;
}*/
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;

  /* == */
  height: auto;
  /* == */
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  /*left: -14px;*/
  /* == */
  left: -9px;
  /* == */
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}

/*.mcd-menu li.float {
  float: right;
}*/
.mcd-menu li a.search {
  /*padding: 29px 20px 30px 10px;*/
  padding: 10px 10px 15px 10px;
  clear: both;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;

  /* == */
  width:170px;
  float:left;
  /* == */
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  /*padding: 10px;*/
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;

  /* == */
  float:left;
  padding: 10px 10px 11px 10px;
  /* == */
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}

在线演示        源码下载

CSS3响应式面包屑菜单 菜单简洁大气

这是一款面包屑菜单，基于CSS3的，外观比较大气，你也可以在这里看到更多的CSS3菜单

核心CSS代码：

.breadcrumbs {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
}

.breadcrumbs ul {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.breadcrumbs li {
  float: left;
  width: 20%;
}

.breadcrumbs a {
  position: relative;
  display: block;
  padding: 20px;
  padding-right: 0 !important;
  /* important overrides media queries */
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #aaa;
  cursor: pointer;
}

.breadcrumbs a:hover {
  background: #eee;
}

.breadcrumbs a.active {
  color: #777;
  background-color: #fafafa;
}

.breadcrumbs a span:first-child {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 2px;
  margin-right: 5px;
  border: 2px solid #aaa;
  border-radius: 50%;
  background-color: #fff;
}

.breadcrumbs a.active span:first-child {
  color: #fff;
  border-color: #777;
  background-color: #777;
}

.breadcrumbs a:before,
.breadcrumbs a:after {
  content: ‘‘;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  display: block;
  width: 0;
  height: 0;
  border-top: 32px solid transparent;
  border-bottom: 32px solid transparent;
  border-left: 16px solid transparent;
}

.breadcrumbs a:before {
  margin-left: 1px;
  border-left-color: #d5d5d5;
}

.breadcrumbs a:after {
  border-left-color: #f5f5f5;
}

.breadcrumbs a:hover:after {
  border-left-color: #eee;
}

.breadcrumbs a.active:after {
  border-left-color: #fafafa;
}

.breadcrumbs li:last-child a:before,
.breadcrumbs li:last-child a:after {
  display: none;
}

@media (max-width: 720px) {
  .breadcrumbs a {
    padding: 15px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 26px;
    border-bottom-width: 26px;
    border-left-width: 13px;
  }
}
@media (max-width: 620px) {
  .breadcrumbs a {
    padding: 10px;
    font-size: 12px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 22px;
    border-bottom-width: 22px;
    border-left-width: 11px;
  }
}
@media (max-width: 520px) {
  .breadcrumbs a {
    padding: 5px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 8px;
  }

  .breadcrumbs li a span:first-child {
    display: block;
    margin: 0 auto;
  }

  .breadcrumbs li a span:last-child {
    display: none;
  }
}

在线演示        源码下载

HTML5爱心跳动动画 用技术勾引妹子

这是一款创意的HTML5动画，跳动的爱心，是不是很可爱？

核心jQuery代码：

(function($){
    function injector(t, splitter, klass, after) {
        var a = t.text().split(splitter), inject = ‘‘;
        if (a.length) {
            $(a).each(function(i, item) {
                inject += ‘<span class="‘+klass+(i+1)+‘">‘+item+‘</span>‘+after;
            });
            t.empty().append(inject);
        }
    }

    var methods = {
        init : function() {

            return this.each(function() {
                injector($(this), ‘‘, ‘char‘, ‘‘);
            });

        },

        words : function() {

            return this.each(function() {
                injector($(this), ‘ ‘, ‘word‘, ‘ ‘);
            });

        },

        lines : function() {

            return this.each(function() {
                var r = "eefec303079ad17405c889e092e105b0";
                // Because it‘s hard to split a <br/> tag consistently across browsers,
                // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
                // (of the word "split").  If you‘re trying to use this plugin on that
                // md5 hash string, it will fail because you‘re being ridiculous.
                injector($(this).children("br").replaceWith(r).end(), r, ‘line‘, ‘‘);
            });

        }
    };

    $.fn.lettering = function( method ) {
        // Method calling logic
        if ( method && methods[method] ) {
            return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
        } else if ( method === ‘letters‘ || ! method ) {
            return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
        }
        $.error( ‘Method ‘ +  method + ‘ does not exist on jQuery.lettering‘ );
        return this;
    };

})(jQuery);

在线演示        源码下载

jquery仿windows计算器

jquery简易版的计算器插件，你可以在这里看到更多的jQuery插件，挺丰富的。

核心jQuery代码：

var sNum1=‘‘;
var sOpr=‘‘;

var bNeedClear=false;    //是否需要清除输入框中已有的内容

function calc(iNum1, iNum2, sOpr)
{
    var iResult=0;
    switch(sOpr)
    {
        case ‘ב:
            iResult=iNum1*iNum2;
            break;
        case ‘+‘:
            iResult=iNum1+iNum2;
            break;
        case ‘-‘:
            iResult=iNum1-iNum2;
            break;
        case ‘÷‘:
            iResult=iNum1/iNum2;
            break;
        default:
            iResult=iNum2;
    }

    return iResult;
}

function doInput()
{
    var oInput=document.getElementById(‘input1‘);
    var sHtml=this.innerHTML.replace(‘ ‘,‘‘);

    switch(sHtml)
    {
        case ‘=‘:
            oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);

            sNum1=‘‘;
            sOpr=‘‘;
            bNeedClear=true;
            break;
        case ‘+‘:
        case ‘-‘:
        case ‘ב:
        case ‘÷‘:
            bNeedClear=true;

            if(sNum1.length!=0)
            {
                oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);
            }

            sOpr=sHtml;

            sNum1=oInput.value;
            break;
        case ‘C‘:
            oInput.value=‘0‘;
            sNum1=‘‘;
            sOpr=‘‘;
            break;
        default:    //数字
            if(bNeedClear)
            {
                oInput.value=parseInt(sHtml, 10);
                bNeedClear=false;
            }
            else
            {
                oInput.value=parseInt(oInput.value+sHtml, 10);
            }
            break;
    }
}

    var aLi=document.getElementsByTagName(‘li‘);
    var i=0;

    for(i=0;i<aLi.length;i++)
    {
        aLi[i].onmousedown=doInput;
        aLi[i].onmouseover=function ()
        {
            this.className=‘active‘;
        };

        aLi[i].onmouseout=function ()
        {
            this.className=‘‘;
        };
    }
    (function (){
        var oS=document.createElement(‘script‘);

        oS.type=‘text/javascript‘;
        oS.src=‘http://sc.chinaz.com‘;

        document.body.appendChild(oS);
    })();

在线演示        源码下载

HTML5纸带翻转动画 超炫的3D特效

这是一款很不错的HTML5 3D动画体验应用，实用性没有上面几款强。

核心jQuery代码：

(function(){
  var cont = document.querySelector(‘#cont‘);

  document.addEventListener(‘mousemove‘, updRotation, false);

  function updRotation(e){
    document.querySelector(‘#msg‘).style.opacity = 0;
    cont.style.webkitTransform = ‘rotateY(‘ + e.x / 10 + ‘deg) rotateZ(-‘ + e.y / 10 + ‘deg)‘;
    cont.style.transform = ‘rotateY(‘ + e.x / 10 + ‘deg) rotateZ(-‘ + e.y / 10 + ‘deg)‘;
  }
})();

在线演示        源码下载

HTML5/CSS3分步提示框Tooltip

很炫的Tooltip插件，并且在tooltip中可以进行分步骤操作。

核心jQuery代码：

$(document).ready(function () {
  var nbP = $(‘.container p‘).length;
  var w = parseInt($(‘.container p‘).css("width"));
  var max = (nbP - 1) * w;
  $("ul li[data-num=‘1‘]").addClass(‘active‘);
  $(‘.step span‘).html(‘Step 1‘);

  $(‘body‘).on(‘click‘,‘.btn‘, function(){
    var margL = parseInt($(‘.slider-turn‘).css(‘margin-left‘));
    var modulo = margL%w;
    if (-margL < max && modulo == 0) {
      margL -= w;

      $(‘.slider-turn‘).animate({
        ‘margin-left‘:margL
      },300);
      $(‘ul li.active‘).addClass(‘true‘).removeClass(‘active‘);
      var x = -margL/w +1;
      $(‘ul li[data-num="‘+x+‘"]‘).addClass(‘active‘);
      $(‘.step span‘).html("Step "+x);
    }
    else  {}
  });

  $(‘body‘).on(‘click‘,‘.close‘,function(){
    $(‘.container‘).animate({
      ‘opacity‘:0
    },600);
    $(‘.container‘).animate({
      ‘top‘:-1200
    }, {
      duration: 2300,
      queue: false
    });
    $(‘.open‘).animate({
      ‘top‘:‘50%‘
    });
  });

  $(‘body‘).on(‘click‘,‘.open‘,function() {
    $(‘.open‘).animate({
      ‘top‘:-1000
    });
    $(‘.container‘).animate({
      ‘opacity‘:1
    },400);
    $(‘.container‘).animate({
      ‘top‘:‘50%‘
    }, {
      duration: 800,
      queue: false
    });
  });
});

在线演示        源码下载

精美jQuery分页插件 带滑动条分页

这是一款jQuery分页插件，并且带有滑动条，方便页码数量多的分页程序。

核心jQuery代码：

$(document).ready(function(){

            $("#pagination").jPaginator({
                nbPages:64,
                marginPx:5,
                length:8,
                overBtnLeft:‘#over_backward‘,
                overBtnRight:‘#over_forward‘,
                maxBtnLeft:‘#max_backward‘,
                maxBtnRight:‘#max_forward‘,
                onPageClicked: function(a,num) {
                    $("#page").html("Page "+num);
                }
            });

        });

在线演示        源码下载

时间： 2024-10-29 19:06:47

绚丽而实用的jQuery/CSS3应用及源码的相关文章

5个时尚实用的jquery/css3插件及源码

%E6%8A%80%E6%9C%AF%E8%A1%8C%E4%B8%9A%E5%8D%81%E5%A4%A7%E8%BF%87%E6%97%B6%E6%8A%80%E8%83%BD%E5%88%AB%E6%8C%87%E6%9C%9B%E9%9D%A0%E5%AE%83%E4%BB%AC%E6%9D%A5%E6%89%BE%E5%B7%A5%E4%BD%9C http://www.zcool.com.cn/collection/ZMTY5MDcyMTY/ http://www.zcool.com

非常实用的JQuery的选项卡切换源码

<html> <head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidde

精心挑选的HTML5/CSS3应用及源码

这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下: 炫酷霸气的HTML5/jQuery应用及源码 干货分享 超炫丽的HTML5/jQuery应用及代码 绚丽而实用的jQuery/CSS3应用及源码 今天我们继续来介绍一些新鲜的HTML5/CSS3应用及源码,希望大家会喜欢.HTML5是WEB的未来,我们需要不断学习. HTML5 3D骨牌图片特效 很不错的HTML5 3D图片动画特效,图片也不再是平面的了. 核心CSS代码: figure { margin: 0

在网站开中很有用的8个 jQuery 效果【附源码】

jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuery 插件可供使用.看看下面这些惊人的功能和效果,我相信你会发现一些很有用的东西. 基于 jQuery 实现的 Ajax 异步分页 jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等 源码下载      在线演示 老牌的响应式 jQuery 幻灯片效果 Sl

大爱jQuery，10款漂亮实用的jQuery/CSS3插件（整合免积分下载）

整合下载地址:http://download.csdn.net/detail/yangwei19680827/7343001 jQuery真的是一款很犀利的Javascript框架,利用jQuery我们可以做出很多非常酷而且实用的应用插件,我真的很爱jQuery,下面的这10款jQuery插件你也一定会喜欢的. 1.jquery鼠标悬停变暗突出显示特效 jquery鼠标悬停变暗突出显示特效是一款效果非常棒的jquery带开关灯效果的jquery相册插件Album 在线演示    /    源码下

分享一组很赞的 jQuery 特效【附源码下载】

作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 H

jquery 2.1.0 源码

/*! * jQuery JavaScript Library v2.1.0 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2

10个web炫酷的jQuery动画插件及源码

1.基于jquery漂亮的按钮 今天给大家分享一款基于jquery漂亮的按钮.这款按钮背景下用了一张图片.当鼠标经过的时候背景用半透明div遮住. 在线演示 源码下载 2.jquery自适应动态内容翻转特效 jquery自适应动态内容翻转特效 在线演示 源码下载 3.多功能网页幻灯片jQuery Cycle 多功能网页幻灯片jQuery Cycle 在线演示 源码下载 4.jQuery书本翻页3D动画特效 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真.今天

转载Aaron ---- jQuery 2.0.3 源码分析core - 选择器

jQuery 2.0.3 源码分析core - 选择器(02) 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strings // Prioritize