jQuery の中断のないスクロール効果 (テキスト/画像/垂直スクロールをサポートする Baidu News をシミュレート)_jquery

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




コードをコピー


コードは次のとおりです:

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();
});





例3.2

复制代 代码如下:

View Code

文字列表滚动

• 在澳中国留学生涉嫌接送非法色情业者赚外快被罚


• 印度北部等今冬遭遇极寒天气 已致数百人被冻死


• 意大利警方禁止挂中国红灯笼 被指危险引燃物


• 日方否认将对中国巡航钓鱼岛飞机


• 日本防卫省否认将对中国飞机警告射击(图)


• 日否认警告射击中海监飞机 恐中日因夺岛开战


• 传解放军举行长白山军演


• 中国高新6号反潜机问世 反潜艇性能优于美军P-3C


• 张建刚：2030年中国将圆海洋强国梦


• 运-20现身试飞中心 可取代伊尔-76任何功能


• 东海舰队引入大批无人机 饱和攻击让日难以招架

<script> <br>jQuery.extend({ <br>roll: function(contentCls, contentParentId, configs){ <br>var setTimeID, totalWidth = 0, totalHeight = 0, <br>firstContent, secondContent, contents; <br>(function(){ <br>var singleContent, cloneContent, nodeList; <br>singleContent = $(contentCls, contentParentId); <br>nodeList = singleContent.children(); <br>if (configs.effect === 'scrollX') { <br>$.each(nodeList, function(idx, itm) { <br>totalWidth = $(itm).outerWidth(true); <br>}); <br>singleContent.css({ 'width': totalWidth 'px' }); <br>} <br>else if (configs.effect === 'scrollY') { <br>$.each(nodeList, function(idx, itm) { <br>totalHeight = $(itm).outerHeight(true); <br>}); <br>singleContent.css({ 'height': totalHeight 'px' }); <br>} <br>cloneContent = singleContent.clone(); <br>cloneContent.appendTo(contentParentId); <br>contents = $(contentCls, contentParentId); <br>firstContent = contents[0]; <br>secondContent = contents[1]; <br>if (configs.effect === 'scrollX') { <br>$(firstContent).css({ 'left': 0 }); <br>$(secondContent).css({ 'left': totalWidth 'px' }); <br>} <br>else if (configs.effect === 'scrollY') { <br>$(firstContent).css({ 'top': 0 }); <br>$(secondContent).css({ 'top': totalHeight 'px' }); <br>} <br>})() <br>function cssAnimate(){ <br>if (configs.effect === 'scrollX') { <br>$(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 'px' }); <br>$(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1 'px' }); <br>$.each(contents, function(idx, itm) { <br>if (parseInt(itm.style.left,10) === -totalWidth) { <br>$(itm).css({ left: totalWidth 'px' }); <br>} <br>}); <br>} <br>else if (configs.effect === 'scrollY') { <br>$(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 'px' }); <br>$(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 'px' }); <br>$.each(contents, function(idx, itm) { <br>if (parseInt(itm.style.top,10) === -totalHeight) { <br>$(itm).css({ top: totalHeight 'px' }); <br>} <br>}); <br>} <br>setTimeId = setTimeout(cssAnimate, configs.duration); <br>} <br>function rollRun(){ <br>setTimeId = setTimeout(cssAnimate, configs.delay); <br>return jQuery; <br>} <br>function rollStop(){ <br>clearTimeout(setTimeId); <br>return jQuery; <br>} <br>return $.extend({ <br>rollRun: rollRun, <br>rollStop: rollStop <br>}); <br>} <br>}); <br></script>
<script> <br>$(function(){ <br>var roll_jQuery, contents; <br>roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollY', duration: 40, delay: 500 }).rollRun(); <br>contents = $('.J_Roll_Content'); <br>contents.bind('mouseenter', function(){ <br>roll_jQuery.rollStop(); <br>}); <br>contents.bind('mouseleave', function(){ <br>roll_jQuery.rollRun(); <br>}); <br>}); <br></script>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JQuery 入門 - バインド Method_jquery を使用したバインディング イベント処理関数のアプリケーションの概要次の記事：JQuery 入門 - バインド Method_jquery を使用したバインディング イベント処理関数のアプリケーションの概要

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル