1. jQuery.roll プラグインの使用手順 jQuery.roll は、Baidu News の中断のないスクロール効果をシミュレートし、テキストと画像の水平および垂直スクロールをサポートします。この機能の使用方法は次のとおりです。 :
/*
* @module jQuery ロール
* @param: contentCls コンテンツ コンテナのクラス名
* @param: contentParentId コンテンツ コンテナの親要素のノード ID
* @param: config 設定パラメータ
*
* @config: スクロール効果効果
* @config: スクロールの継続時間 1 ピクセルの実行時間 (ミリ秒)
* @config: 遅延 スクロールを開始するまでの遅延時間 (ミリ秒)
*
*/
jQuery.roll( contentCls, contentParentId, configs);
2. 関数のソース コード jQuery.extend({
roll: function(contentCls, contentParentId, configs){
var setTimeID, totalWidth = 0, totalHeight = 0 ,
firstContent, SecondContent, content;
(function(){
var singleContent, cloneContent, nodeList;
singleContent = $(contentCls, contentParentId);
nodeList = singleContent.children() ;
if (configs.effect == = 'scrollX') {
$.each(nodeList, function(idx, itm) {
totalWidth = $(itm).outerWidth(true);
});
singleContent.css( { 'width': totalWidth 'px' });
}
else if (configs.effect === 'scrollY') {
$.each (nodeList, function(idx, itm) {
totalHeight = $(itm).outerHeight(true);
});
singleContent.css({ 'height': totalHeight 'px' });
}
cloneContent.clone();
content = $(contentCls, contentParentId); SecondContent = content[1];
if (configs.effect === 'scrollX') {
$(firstContent).css({ 'left': 0 }); css({ 'left': totalWidth 'px' });
}
else if (configs.effect === 'scrollY') {
$(firstContent).css({ 'top': 0 });
$(secondContent) .css({ 'top': totalHeight 'px' });
}
})()
関数 cssAnimate(){
if ( configs.effect === 'scrollX') {
$(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 'px' }); css({ left: parseInt(secondContent.style.left, 10) - 1 'px' });
$.each(contents, function(idx, itm) {
if (parseInt(itm.style. left,10) === -totalWidth) {
$(itm).css({ left: totalWidth 'px' })
}
}); (configs.effect === 'scrollY') {
$(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 'px' }); .css({ top: parseInt(secondContent.style .top, 10) - 1 'px' });
$.each(contents, function(idx, itm) {
if (parseInt(itm.style) .top,10) === -totalHeight) {
$(itm).css({ top: totalHeight 'px' })
}
}); = setTimeout(cssAnimate, configs.duration);
}
関数 rollRun(){
setTimeout(cssAnimate, configs.delay);
return jQuery; rollStop(){
clearTimeout(setTimeId) ;
return jQuery;
}
return $.extend({
rollRun,
rollStop: rollStop
});
}
});
3. 完全なデモ ソース コード
例 3.1
コードをコピー
コードは次のとおりです:
jQuery デモ body { font: 12px/1.5 tahoma,"microsoft yahei","微软雅黑E8F6F96C59ED1"; }
ボディ、div、ul、li、h1 {マージン: 0;パディング: 0; }
.news { margin: 100px 0 0 100px; }
.news ul {リストスタイル: なし; }
.news-box {幅: 600px;マージン左: 20px;高さ: 24px;背景色: #fcfcfd;オーバーフロー: 非表示;位置: 相対的; _ズーム: 1; }
.news h1 { margin-bottom: 15px;パディング左: 20px;色: #370188; }
.news-list {位置: 絶対; }
.news-list { float: left; }
.news-list li { float: left; _display: インライン;マージン右: 15px;高さ: 24px;行の高さ: 24px;オーバーフロー: 非表示;ワードラップ: 通常; }
.news-list li a { text-decoration: none;色: #000; }
.news-list li a:hover {
-webkit-transition: カラー .2 秒リニア、背景色 .3 秒リニア;
-moz-transition: カラー 0.2 秒リニア、背景色 0.3 秒リニア;
-ms-transition: カラー 0.2 秒リニア、背景色 0.3 秒リニア;
-o-transition: カラー 0.2 秒リニア、背景色 0.3 秒リニア;
トランジション: カラー 0.2 秒リニア、背景色 0.3 秒リニア;
カラー: #FF4400;
テキスト装飾: 下線;
}
.news-list li a:visited { color: #290065; }
文字列表滚動
// こちら参照jQuery.roll代码
$(function(){
var roll_jQuery, content;
roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { 効果: 'scrollX'、持続時間: 40、遅延: 500 }).rollRun();
contents = $('.J_Roll_Content');
contents.bind('mouseenter', function(){
roll_jQuery.rollStop();
});
contents.bind('mouseleave', function(){
roll_jQuery.rollRun();
});
