澳门新葡萄京官网注册 6

25个非常实用的jQuery/CSS3应用组件

在线演示源码下载

9、jQuery jBox弹出窗口插件

7、HTML5/CSS3超酷主旨图特效

本文由码农网 –
小峰原创,转发请看清文末的转发必要,应接插手大家的付费投稿布署!

25. jQuery带小LogoTab选项卡插件 

4、jQuery达成苏州克图形拼接翻转动漫

HTML代码:

<div id="gal">
  <nav class="galnav">
    <ul>
        <li><input type="radio" name="btn" value="one" checked="checked" />
        <label for="btn"></label>
        <figure>
          <img src="images/01_Fabio_Basile.jpg" />
          <figcaption>
            <h4>Fabio Basile</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity</p>
        <ul>
            <li><a href="#" class="entypo-dribbble">
            </a></li>
            <li><a href="#" class="entypo-twitter"></a>
            </li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="two" /> <label for="btn">
        </label>
         <figure class="entypo-forward">
          <img src="images/08_Brian_Miller.jpg" />
          <figcaption>
            <h4>Brian Miller</h4>
              <nav role='navigation'>
                <p>TypeTi.me</p>
        <ul>
            <li><a href="#" class="entypo-dribbble"></a>
            </li>
            <li><a href="#" class="entypo-twitter"></a>
            </li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="three" /> <label for="btn">
        </label>
        <figure class="entypo-forward">
          <img src="images/05_Nicolas_Quod.jpg" />
          <figcaption>
            <h4>Nicolas Quod</h4>
              <nav role='navigation'>
                <p>Iphone 6 - Notification - iOS 7</p>
        <ul>
            <li>
            <a href="#" class="entypo-dribbble">
            </a></li>
            <li>
            <a href="#" class="entypo-twitter">
            </a></li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="four" /> <label for="btn">
        </label>
         <figure class="entypo-forward">
          <img src="images/04_Joffrey.jpg" />
          <figcaption>
            <h4>Joffrey</h4>
              <nav role='navigation'>
                <p>功能齐全</p>
        <ul>
            <li><a href="#" class="entypo-dribbble">
            </a></li>
            <li><a href="#" class="entypo-twitter">
            </a></li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="five" /> <label for="btn">
        </label>
         <figure class="entypo-forward">
          <img src="images/09_Jared_Long.jpg" />
          <figcaption>
            <h4>Jared Long</h4>
              <nav role='navigation'>
                <p>Don't drop your iPhone Infinity</p>
        <ul>
            <li>
            <a href="#" class="entypo-dribbble">
            </a></li>
            <li>
            <a href="#" class="entypo-behance">
            </a></li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="six" /> <label for="btn">
        </label>
         <figure class="entypo-forward">
          <img src="images/02_Charles_Treece.jpg" />
          <figcaption>
            <h4>Charles Treece</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity Side Status Bar</p>
        <ul>
            <li>
            <a href="#" class="entypo-dribbble">
            </a></li>
            <li>
            <a href="#" class="entypo-twitter">
            </a></li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
    </ul>
  </nav>
</div>

前不久享受25款效用极度常有力的jQuery/CSS3应用插件,招待收藏。

2、jQuery水平滑动菜单 可筛选菜单项

澳门新葡萄京官网注册 1

18. jQuery圆盘抽取奖金特效 

前些天大家要来分享风华正茂款很非常的jQuery菜单,整三个菜单项都是足以水平滑动的,何况每叁个菜单项都有三个漫画的图标,特别动人。别的,菜单项能够依据不一致的分类筛选,很相符菜单项繁缛的网页应用,能够让菜单项整齐不乱归类。

那是生机勃勃款基于jQuery和CSS3的纽带图动漫插件,插件特别Mini,成效也比较轻便,它的性状是图形切换按键相符一条时间轴,点击时间轴的圆形就能够切换来相应的图纸。点击切换按键时,按键会产出渐隐渐显的发光特效,图片切换进度中整张图片过渡的功力十三分平和,而且图片描述也相应以卡通的艺术呈现在图片上,是风流倜傥款极其棒的CSS3图片切换组件。

在线演示 / 源码下载 

5、jQuery原始图片比较插件

CSS代码

因为那款宗旨图插件并从未接纳别的JS代码,所以,图片切换功效全体信赖CSS3有关性情,具体的CSS代码如下:

#gal {
  position:relative;
  width:600px;
  height:300px;
  margin:0 auto;
  top:100px;
  background:white;
  -webkit-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:   translate3d(0, 0, 0);
  -ms-transform:    translate3d(0, 0, 0);
  -o-transform:     translate3d(0, 0, 0);
  transform:        translate3d(0, 0, 0);
}
#gal:after {
  content:'';
  position:absolute;
  bottom:24px;
  right:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.35);
  z-index:3;
}
#gal ul {list-style-type:none;}
input[type="radio"], input[type="radio"] + label {
  position:absolute;
  bottom:15px;
  display:block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  cursor:pointer;
}
input[type="radio"] {
  opacity:0;
  z-index:9;
}
input[value="one"], input[value="one"] + label {left:20px;}
input[value="two"], input[value="two"] + label {left:128px;}
input[value="three"], input[value="three"] + label {left:236px;}
input[value="four"], input[value="four"] + label {left:344px;}
input[value="five"], input[value="five"] + label {left:452px;}
input[value="six"], input[value="six"] + label {right:20px;}
input[type="radio"] + label {
  background:rgba(255,255,255,0.35);
  z-index:7;
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}
[class*="entypo-"]:before {
  position:absolute;
  font-family: 'entypo', sans-serif;
}
figure[class*="entypo-"]:before {
  left:10px;
  top:5px;
  font-size:2rem;
  color:rgba(255,255,255,0);
  z-index:1;
  -webkit-transition:color .1s;
  -moz-transition:color .1s;
  -o-transition:color .1s;
  transition:color .1s;
}
a[class*="entypo-"]:before {
  top:8px;
  left:9px;
  font-size:1.5rem;
  color:white;
}
a:hover[class*="entypo-"]:before {
  color:white;
}
figure, figure img, figcaption {
  position:absolute;
  top:0;
  right:0;
}
figure {
  bottom:0;
  left:0;
  width:600px;
  height:300px;
  display:block;
  overflow:hidden;
}
figure img {
  bottom:0;
  left:0;
  display:block;
  width:600px;
  height:300px;
  z-index:1;
  -webkit-transform:translateX(600px);
  -moz-transform:translateX(600px);
  -ms-transform:translateX(600px);
  -o-transform:translateX(600px);
  transform:translateX(600px);
  -webkit-transition:all .15s .15s, z-index 0s;
  -moz-transition:all .15s .15s, z-index 0s;
  -o-transition:all .15s .15s, z-index 0s;
  transition:all .15s .15s, z-index 0s;
}
figcaption {
  display:block;
  width:270px;
  height:300px;
  padding-top:20px;
  background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
  background-size:600px 600px;
  background-repeat:no-repeat;
  background-position:-300px -150px;
  text-align:center;
  z-index:3;
  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -webkit-transform:translateX(300px);
  -moz-transform:translateX(300px);
  -ms-transform:translateX(300px);
  -o-transform:translateX(300px);
  transform:translateX(300px);
  -webkit-transition:all .35s;
  -moz-transition:all .35s;
  -o-transition:all .35s;
  transition:all .35s;
}
h4 {
  display:inline-block;
  padding:0 15px;
  color:white;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:2rem;
}
figcaption nav ul {display:block;padding-top:10px;}
figcaption nav ul li {display:inline-block;margin-left:5px;}
figcaption nav ul li a {
  position:relative;
  display:block;
  width:40px;
  height:40px;
  background:rgba(255,255,255,0.2);
  text-decoration:none;
  color:white;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -webkit-transition:all .15s;
  -moz-transition:all .15s;
  -o-transition:all .15s;
  transition:all .15s;
}
figcaption nav ul li a:hover {
  background:rgba(255,255,255,0);
  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
}
figcaption p {
  padding:50px 15px;
  font-family:'Titillium Web', sans-serif;
  font-weight:300;
  color:#333;
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:50% 0%;
}

input[type="radio"]:hover + label {
  background:rgba(255,255,255,0.6);
}
input[type="radio"]:checked + label {
  background:rgba(255,255,255,1);
  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
}
input[type="radio"]:checked + label:before {}
input[type="radio"]:checked ~ figure img {
  z-index:2;
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
  -webkit-transition:all .15s, z-index 0s;
  -moz-transition:all .15s, z-index 0s;
  -o-transition:all .15s, z-index 0s;
  transition:all .15s, z-index 0s;
}
input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
  z-index:3;
  color:rgba(255,255,255,0.5);
  -webkit-transition:color .5s;
  -moz-transition:color .5s;
  -o-transition:color .5s;
  transition:color .5s;
}
input[type="radio"]:checked ~ figure figcaption {
  z-index:8;
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  -webkit-transition:all .35s, .7s;
  -moz-transition:all .35s, .7s;
  -o-transition:all .35s, .7s;
  transition:all .35s, .7s;
}

在线演示源码下载

8、jQuery pikaday简易日期采纳插件

明天要享受的这款HTML5/CSS3枢纽图插件切换效果比较简单,不过外观和职能并不是常强硬。该CSS3火热图在切换图片时,图片以淡入淡出的办法降低消失并展现下一张图纸。宗旨图插件还具有一套超大气的内外翻页开关,是生机勃勃款极度实用HTML5/CSS3核心图应用。

在线演示 / 源码下载 

那是意气风发款很实用的jQuery图片插件,它能够支持您兑现原图和透过管理的图纸展开相比较,那款jQuery插件生龙活虎共有3中相比较方式,重即使拖动中间的汾水陵来张开两张图纸的内部原因相比较。

澳门新葡萄京官网注册 2 

在线演示 源码下载

2、CSS3货仓式图片切换动漫插件

在线演示 源码下载

在线演示 / 源码下载 

6、HTML5/CSS3图纸过滤归类应用

这是生机勃勃款用Javascript和CSS制作的仿GoogleNexus样式的菜系导航,菜单拾分清爽亮丽,是豆蔻梢头款不错的JS菜单导航

澳门新葡萄京官网注册 ,在线演示 源码下载

24. jQuery多规格挑选插件代码 

事情发生在此之前大家大饱眼福过无数炫目的jQuery图片特效,有空大家能够看看。前不久咱们要再来分享风度翩翩款基于jQuery的图纸特效,它的成效是图片纽伦堡克翻转动漫,而且将那一个马尔默克块状图片拼接起来组成一张完整的图形,翻转动画特别的酷。

澳门新葡萄京官网注册 3

在线演示 源码下载

5、jQuery笔记本式图片滑动插件,补助鼠标拖拽

以上就是那个很帅的jQuery图片动漫效果,款待收藏分享。

14、jQuery图文结合滚动切换效果 

前天我们要来分享风姿潇洒款基于HTML5和CSS3的图形特效,它能够很有利地将各类图片张开分拣和过滤,在分拣过滤的进程中,图片有万分酷的动漫效果,何况,结合CSS3的表征,这里一齐提供了3种绚烂的图样过滤动漫。

那是风流洒脱款非常准确的jQuery多效果与利益下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功用足够,包蕴多级菜单、自定义内容菜单、表单菜单,是黄金时代款不足多得的jQuery菜单导航插件。

在线演示 源码下载

澳门新葡萄京官网注册 4 

在线演示 源码下载

1、jQuery水晶样式下拉导航
那是生机勃勃款特别不利的jQuery多效果与利益下拉菜单插件,菜单…

那又是风流浪漫款太酷的纯CSS3动漫特效,它是叁个得以燃放的打火机,当你用鼠标滑过这只打火机时,打火机就能展开,然后开头现出火花点火的动漫特效。其余要表明的是,整个动漫都以接受纯CSS3兑现的,未有后生可畏行JS代码,小同伙们,这些CSS3卡通是或不是很帅?

6、仿谷歌 Nexus样式菜单导航

jQuery管理图片的例证特别多,因为图片动画特效能够让网页特别维妙维肖,当然,随着CSS3的的加盟,jQuery在拍卖图片方面更为可观,出来的成效也特别摄人心魄。本文要分享部分依照jQuery的图样动画效果,而且提供完成的源代码。

澳门新葡萄京官网注册 5

3、纯CSS3兑现打火机火焰动漫

那是风度翩翩款基于jQuery的多规格查询插件,能够筛选日期、单选框、多选框、文本框等。 

这一次大家要来分享风流罗曼蒂克款jQuery核心图插件,那款jQuery大旨图插件有2个特色,第一是关节图以宽屏的样式展现,第二是核心图的图纸上方悬浮着文字描述,而且能够在文字描述上点击切换按键。主旨图完全相当大气,不只可以够通过左右开关来切换,而且能够点击上面的按键来切换至任性图片。

那是蓬蓬勃勃款特不利的jQuery图表插件,基于xCharts,图表使用特别方便,帮忙自定义时间段查询,並且伴有动漫效果。

在线演示 源码下载

23. jQuery/CSS3响应式全屏宗旨图 

本文链接:本文小编:html5tricks – 超人

jBox是意气风发款基于jQuery的弹出窗口插件,jBox能够兑现普通提醒框、确认框、iframe加载等效果,是风度翩翩款十分不错的jQuery弹出窗口插件。

澳门新葡萄京官网注册 6

12、Javascript完成的WEB斯诺克台球游戏 

1、jQuery文字描述悬浮大旨图宽屏突显

在线演示 / 源码下载 

在线演示    /    源码下载

澳门新葡萄京官网注册 7 

在线演示 / 源码下载 

澳门新葡萄京官网注册 8

在线演示 / 源码下载 

澳门新葡萄京官网注册 9 

澳门新葡萄京官网注册 10 

1、jQuery水晶样式下拉领航

那是风流倜傥款特别有特色的jQuery图片滑动插件,它不独有有台式机样式,况且援助鼠标拖拽。

澳门新葡萄京官网注册 11 

在线演示    /    源码下载

澳门新葡萄京官网注册 12 

在线演示 / 源码下载 

imgbubbles是生机勃勃款基于jQuery的卡通片开关菜单插件,鼠标滑过按键时,开关会有日渐加大的特效,放大的进程能够自定义。

澳门新葡萄京官网注册 13

7、带数字索引的jquery宗旨图

在线演示    /    源码下载

那款jQuery图文切换插件比较平常,不过大器晚成款很实用的jQuery核心图。 

那是生龙活虎款用jQuery和CSS3技术达成的仿iOS股票市镇消息滚动作效果应的插件,效果很准确。 

11、Apple样式jQuery横向动漫Logo菜单 

在线演示 / 源码下载 

13、jQuery/CSS3仿iOS股票市镇新闻滚动 

17、jQuery带搜狐按键再次回到最上端插件 

众多英特网商号的商品连串多数,店肆会在左边手显示一个纵向下拉菜单,那款下拉菜单非常的大方。 

在线演示    /    源码下载

那是蓬蓬勃勃款来自易迅网的产物显示主旨图,该jQuery大旨图在右臂有竖向数字索引,鼠标滑过数字索引就能够切换图片。

在线演示 / 源码下载 

澳门新葡萄京官网注册 14 

那款CSS3下拉菜单样式非常红,每多个菜单项有贰个丰盛可爱的小Logo,鼠标滑过小Logo时就可以进行二级菜单项。 

澳门新葡萄京官网注册 15

那又是风姿罗曼蒂克款jQuery圆盘抽取奖金插件,点击中间“点击抽取奖金”按键就能够初叶抽取奖金,那款抽取奖金插件能够在抽取奖金甘休后彰显抽取奖金结果。 

在线演示 / 源码下载 

澳门新葡萄京官网注册 16 

在线演示    /    源码下载

19. 很纯情的CSS3动漫下拉菜单 

澳门新葡萄京官网注册 17 

在线演示 / 源码下载 

在线演示 / 源码下载 

16、jQuery前后张图片部分截图核心图 

在线演示    /    源码下载

澳门新葡萄京官网注册 18 

那是生机勃勃款相当酷的JS斯诺克游戏,效果非常流利,唯豆蔻梢头的欠缺是从未周全的弹子游戏准则和多个人游戏。 

那是生龙活虎款很雅观的jQuery登陆和注册表单,点击登入时弹出叁个记名窗口并陪同动漫效果,注册页面则是全屏显示,非常洋气的jQuery表单。 

10、HTML5重力感应积木游戏 

3、基于jQuery和xCharts的卡通图表

在线演示 / 源码下载

在线演示 / 源码下载 

20. jQuery样式切换器插件switcher 

澳门新葡萄京官网注册 19 

那是大器晚成款全屏的jQuery主旨图插件,该焦点图的个性是前后几张图片都会有风流倜傥对的截图,滑动作效果果至极不易。 

澳门新葡萄京官网注册 20 

澳门新葡萄京官网注册 21

那是生龙活虎款极其炫的CSS3图纸切换动漫效果,动漫效果极度丰富,折叠式、淡入淡出式、旋转式等,让您的图形颇负特色,大大提升客户体验。

4、jQuery动漫图标菜单导航插件imgbubbles

22. jQuery弹出层登录和全屏注册表单 

在线演示    /    源码下载

那也是风姿罗曼蒂克款基于HTML5本事的重力感应游戏,一些积木从天而下,你能够拖动鼠标甩动那一个积木,积木在地心重力的功能下纷纭落下,而且相互撞击。 

在线演示    /    源码下载

在线演示 / 源码下载 

pikaday是黄金年代款基于jQuery的日子采用插件,插件特别轻便,外观也可以接受,是风姿洒脱款值得生龙活虎试的日子接收插件。

jQuery重临最上端开关的插件超多,然则那是生龙活虎款特地通过定制的jQuery再次回到最上部按钮插件,它有一个十二分正确的功力,就是足以满含分享到博客园的按键,用户能够十一分便于地享用向往的稿子。

那是生龙活虎款基于jQuery的横向动漫菜单,菜单的样式是仿苹果官方网址的菜系样式,菜单的Logo动漫太酷。 

乘胜鼠标移动图片渐渐放手特效。 

那是风姿罗曼蒂克款竖向Tab
jQuery插件,该Tab的插件的表征不只好够竖向体现,并且Tab选项卡式磁带有美貌的小Logo。 

澳门新葡萄京官网注册 22 

澳门新葡萄京官网注册 23

在线演示    /    源码下载

澳门新葡萄京官网注册 24

在线演示 / 源码下载 

澳门新葡萄京官网注册 25

这是风流倜傥款基于jQuery的在线样式切换插件,可以切换背景颜色和背景图片,效果很理想。 

这是后生可畏款基于jQuery和CSS3的相应式宗旨图,该要点图是全屏展现的,切换时播放多样云兴霞蔚的卡通片效果。 

澳门新葡萄京官网注册 26 

21. jQuery网络超级市场左边分类下拉菜单 

澳门新葡萄京官网注册 27 

15、JS图片循环放大 

发表评论

电子邮件地址不会被公开。 必填项已用*标注