前卫并具有实力的插件-幻灯片、提示、动画、svg地图、背景、日历

Swipebox

Swipebox 是一款可触摸的 jQuery 灯箱效果插件，可用于桌面，移动和平板电脑。

支持移动设备滑动手势导航，桌面电脑上可以用键盘导航，不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理，支持视网膜显示，能够通过 CSS 轻松定制。

使用示例：

[javascript] view plaincopyprint?
  1. $("#gallery").click(function(e){  
  2.     e.preventDefault();  
  3.     $.swipebox([  
  4.         {href:'big/image1.jpg', title:'My Caption'},   
  5.         {href:'big/image2.jpg', title:'My Second Caption'}  
  6.     ]);  
  7. });  
$("#gallery").click(function(e){
	e.preventDefault();
	$.swipebox([
		{href:'big/image1.jpg', title:'My Caption'}, 
		{href:'big/image2.jpg', title:'My Second Caption'}
	]);
});

  插件下载     效果演示

 

Tooltipster

Tooltipster 是一款轻量的，易于使用的 jQuery 插件，使您可以轻松创建语义化，现代化的工具提示。Tooltipster 允许您在提示内容中使用任何你能想到的 HTML 标签，这意味着您可以在提示层里插入图像和文本格式标记之类的东西。

效果可以自由定制，默认参数如下：

[javascript] view plaincopyprint?
  1. $('.tooltip').tooltipster({  
  2.    animation: 'fade',  
  3.    arrow: true,  
  4.    arrowColor: '',  
  5.    content: '',  
  6.    delay: 200,  
  7.    fixedWidth: 0,  
  8.    maxWidth: 0,  
  9.    functionBefore: function(origin, continueTooltip) {  
  10.       continueTooltip();  
  11.    },  
  12.    functionReady: function(origin, tooltip) {},  
  13.    functionAfter: function(origin) {},  
  14.    icon: '(?)',  
  15.    iconDesktop: false,  
  16.    iconTouch: false,  
  17.    iconTheme: '.tooltipster-icon',  
  18.    interactive: false,  
  19.    interactiveTolerance: 350,  
  20.    offsetX: 0,  
  21.    offsetY: 0,  
  22.    onlyOne: true,  
  23.    position: 'top',  
  24.    speed: 350,  
  25.    timer: 0,  
  26.    theme: '.tooltipster-default',  
  27.    touchDevices: true,  
  28.    trigger: 'hover',  
  29.    updateAnimation: true  
  30. });  
$('.tooltip').tooltipster({
   animation: 'fade',
   arrow: true,
   arrowColor: '',
   content: '',
   delay: 200,
   fixedWidth: 0,
   maxWidth: 0,
   functionBefore: function(origin, continueTooltip) {
      continueTooltip();
   },
   functionReady: function(origin, tooltip) {},
   functionAfter: function(origin) {},
   icon: '(?)',
   iconDesktop: false,
   iconTouch: false,
   iconTheme: '.tooltipster-icon',
   interactive: false,
   interactiveTolerance: 350,
   offsetX: 0,
   offsetY: 0,
   onlyOne: true,
   position: 'top',
   speed: 350,
   timer: 0,
   theme: '.tooltipster-default',
   touchDevices: true,
   trigger: 'hover',
   updateAnimation: true
});

  插件下载     效果演示

 

jQuery Transit

jQuery Transit

Transit 用于实现超平滑的 CSS3 过渡和变换动画效果。借助这款插件，你可以轻松实现 translate、rotate、scale 和 skew 等众多效果。

Transform 效果使用示例：

[javascript] view plaincopyprint?
  1. $("#box").css({ x: '30px' });               // Move right  
  2. $("#box").css({ y: '60px' });               // Move down  
  3. $("#box").css({ translate: [60,30] });      // Move right and down  
  4. $("#box").css({ rotate: '30deg' });         // Rotate clockwise  
  5. $("#box").css({ scale: 2 });                // Scale up 2x (200%)  
  6. $("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical  
  7. $("#box").css({ skewX: '30deg' });          // Skew horizontally  
  8. $("#box").css({ skewY: '30deg' });          // Skew vertical  
  9. $("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation  
  10. $("#box").css({ rotateY: 30 });  
  11. $("#box").css({ rotate3d: [1, 1, 0, 45] });  
$("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

Transition 效果使用示例：

[javascript] view plaincopyprint?
  1. $("#box").transition({ opacity: 0.1, scale: 0.3 });  
  2. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration  
  3. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing  
  4. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing  
  5. $("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback  
  6. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything  
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

  插件下载     效果演示

 

noty

noty

noty 这款插件效果特别炫丽！可以轻松实现通知，提醒，成功、错误或者警告提示，确认提示等等，效果十分丰富，可以自定义文本、动画、速度以及按钮。

默认参数配置如下：

[javascript] view plaincopyprint?
  1. $.noty.defaults = {  
  2.     layout: 'top',  
  3.     theme: 'defaultTheme',  
  4.     type: 'alert',  
  5.     text: '',  
  6.     dismissQueue: true, // If you want to use queue feature set this true  
  7.     template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',  
  8.     animation: {  
  9.         open: {height: 'toggle'},  
  10.         close: {height: 'toggle'},  
  11.         easing: 'swing',  
  12.         speed: 500 // opening & closing animation speed  
  13.     },  
  14.     timeout: false, // delay for closing event. Set false for sticky notifications  
  15.     force: false, // adds notification to the beginning of queue when set to true  
  16.     modal: false,  
  17.     maxVisible: 5, // you can set max visible notification for dismissQueue true option  
  18.     closeWith: ['click'], // ['click', 'button', 'hover'],  
  19.     buttons: false // an array of buttons  
  20. };  
$.noty.defaults = {
    layout: 'top',
    theme: 'defaultTheme',
    type: 'alert',
    text: '',
    dismissQueue: true, // If you want to use queue feature set this true
    template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
    animation: {
        open: {height: 'toggle'},
        close: {height: 'toggle'},
        easing: 'swing',
        speed: 500 // opening & closing animation speed
    },
    timeout: false, // delay for closing event. Set false for sticky notifications
    force: false, // adds notification to the beginning of queue when set to true
    modal: false,
    maxVisible: 5, // you can set max visible notification for dismissQueue true option
    closeWith: ['click'], // ['click', 'button', 'hover'],
    buttons: false // an array of buttons
};

  插件下载     效果演示

 

jQuery Vector Maps

jQuery Vector Maps

JQVMap 是一款实用的地图插件，在现代浏览器（Firefox, Safari, Chrome, Opera and Internet Explorer 9）中使用可伸缩矢量图形技术（SVG）来显示地图，低版本的 IE（Internet Explorer 6-8）使用 VML 来提供地图功能。 

示例代码：

[html] view plaincopyprint?
  1. <script src="js/jquery.vmap.js"></script>  
  2. <script src="js/jquery.vmap.world.js"></script>  
  3. <script src="js/jquery.vmap.sampledata.js"></script>  
  4.    
  5. <script>  
  6. jQuery('#vmap').vectorMap({  
  7.     map: 'world_en',  
  8.     backgroundColor: null,  
  9.     color: '#ffffff',  
  10.     hoverOpacity: 0.7,  
  11.     selectedColor: '#666666',  
  12.     enableZoom: true,  
  13.     showTooltip: true,  
  14.     values: sample_data,  
  15.     scaleColors: ['#C8EEFF', '#006491'],  
  16.     normalizeFunction: 'polynomial'  
  17. });  
  18. </script>  
  19.    
  20. <div id="vmap" style="width: 600px; height: 400px;"></div>  
<script src="js/jquery.vmap.js"></script>
<script src="js/jquery.vmap.world.js"></script>
<script src="js/jquery.vmap.sampledata.js"></script>
 
<script>
jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverOpacity: 0.7,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#C8EEFF', '#006491'],
    normalizeFunction: 'polynomial'
});
</script>
 
<div id="vmap" style="width: 600px; height: 400px;"></div>

  插件下载     效果演示

 

BigVideo.js

BigVideo.js

BigVideo.js 可以很容易地在网站中实现填充的背景视频。它可以用于播放无声的环境背景视频，或者一系列的影片，你也可以用它来显示目前流行的网站大背景图像功能。

创建一个铺满整个浏览器窗口的视频：

[javascript] view plaincopyprint?
  1. $(function() {  
  2.     var BV = new $.BigVideo();  
  3.     BV.init();  
  4.     BV.show('http://video-js.zencoder.com/oceans-clip.mp4');  
  5. });  
$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});

在 Firefox 浏览器中，可以配置显示 Ogg 格式视频：

[javascript] view plaincopyprint?
  1. $(function() {  
  2.     var BV = new $.BigVideo({useFlashForFirefox:false});  
  3.     BV.init();  
  4.     BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});  
  5. });  
$(function() {
    var BV = new $.BigVideo({useFlashForFirefox:false});
    BV.init();
    BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});

如果是背景视频，则如下配置：

[javascript] view plaincopyprint?
  1. $(function() {  
  2.     var BV = new $.BigVideo();  
  3.     BV.init();  
  4.     BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});  
  5. });  
$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});

  插件下载     效果演示

 

Calendario

Calendario 是一个灵活的日历插件，用于实现响应式的布局。其目的是在小屏幕和大屏幕，提供一个合适的布局让日历尽可能保持流体结构。这款插件来自 Codrops，有详细的制作教程可以参考学习：《Calendario: A Flexible Calendar Plugin》。

  插件下载     效果演示

posted @ 2015-01-08 10:23  Berly  阅读(310)  评论(0)    收藏  举报