这是一款非常实用的jQuery和css3自动轮换的用户评论留言插件。该用户评论插件通过进度条来控制用户评论显示的时间,当进度条到达100%时,该插件自动播放下一条用户留言。该插件同样通过media query媒体查询来处理各种屏幕的响应式问题。
HTML结构
<div id="cbp-qtrotator" class="cbp-qtrotator"> <div class="cbp-qtcontent"> <img src="images/1.jpg" alt="img01" /> <blockquote> <p>People eat meat and think they will become as strong as an ox, forgetting that the ox eats grass.</p> <footer>Pino Caruso</footer> </blockquote> </div> <div class="cbp-qtcontent"> <!-- ... --> </div> <div class="cbp-qtcontent"> <!-- ... --> </div> <div class="cbp-qtcontent"> <!-- ... --> </div> </div>
CSS样式
插件中用户留言面板的CSS样式非常简单,你可以构建自己的CSS样式来使它更加漂亮。
.cbp-qtrotator { position: relative; margin: 3em auto 5em auto; max-width: 800px; width: 100%; min-height: 400px; } .cbp-qtrotator .cbp-qtcontent { position: absolute; min-height: 200px; border-top: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; padding: 2em 0; top: 0; z-index: 0; opacity: 0; width: 100%; } .no-js .cbp-qtrotator .cbp-qtcontent { border-bottom: none; } /* Currently visible */ .cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent, .no-js .cbp-qtrotator .cbp-qtcontent { position: relative; z-index: 100; pointer-events: auto; opacity: 1; } .cbp-qtrotator .cbp-qtcontent:before, .cbp-qtrotator .cbp-qtcontent:after { content: " "; display: table; } .cbp-qtrotator .cbp-qtcontent:after { clear: both; } .cbp-qtprogress { position: absolute; background: #47a3da; height: 1px; width: 0%; top: 0; z-index: 1000; } .cbp-qtrotator blockquote { margin: 0; padding: 0; } .cbp-qtrotator blockquote p { font-size: 2em; color: #888; font-weight: 300; margin: 0.4em 0 1em; } .cbp-qtrotator blockquote footer { font-size: 1.2em; } .cbp-qtrotator blockquote footer:before { content: '? '; } .cbp-qtrotator .cbp-qtcontent img { float: right; margin-left: 3em; } /* Example for media query */ @media screen and (max-width: 30.6em) { .cbp-qtrotator { font-size: 70%; } .cbp-qtrotator img { width: 80px; } }
JAVASCRIPT
有几个可用参数可以使用:
- speed:CSS动画过渡的时间,单位毫秒,默认值为700ms。
- easing:CSS动画的类型,默认值为easing。
- interval:进度条每次从0走到100%的时间(用户评论显示的时间)。单位毫秒,默认值为8000ms。
代码如下:
;( function( $, window, undefined ) { 'use strict'; // global var Modernizr = window.Modernizr; $.CBPQTRotator = function( options, element ) { this.$el = $( element ); this._init( options ); }; // the options $.CBPQTRotator.defaults = { // default transition speed (ms) speed : 700, // default transition easing easing : 'ease', // rotator interval (ms) interval : 8000 }; $.CBPQTRotator.prototype = { _init : function( options ) { // options this.options = $.extend( true, {}, $.CBPQTRotator.defaults, options ); // cache some elements and initialize some variables this._config(); // show current item this.$items.eq( this.current ).addClass( 'cbp-qtcurrent' ); // set the transition to the items if( this.support ) { this._setTransition(); } // start rotating the items this._startRotator(); }, _config : function() { // the content items this.$items = this.$el.children( 'div.cbp-qtcontent' ); // total items this.itemsCount = this.$items.length; // current item´s index this.current = 0; // support for CSS Transitions this.support = Modernizr.csstransitions; // add the progress bar if( this.support ) { this.$progress = $( '' ).appendTo( this.$el ); } }, _setTransition : function() { setTimeout( $.proxy( function() { this.$items.css( 'transition', 'opacity ' + this.options.speed + 'ms ' + this.options.easing ); }, this ), 25 ); }, _startRotator: function() { if( this.support ) { this._startProgress(); } setTimeout( $.proxy( function() { if( this.support ) { this._resetProgress(); } this._next(); this._startRotator(); }, this ), this.options.interval ); }, _next : function() { // hide previous item this.$items.eq( this.current ).removeClass( 'cbp-qtcurrent' ); // update current value this.current = this.current
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!