jQueryプラグインのスクロールでシームレスなスクロールを実現effect

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:01 PM

jqueryscrollシームレスなスクロール

スクロールプラグイン

上下左右、フェードイン・アウト、スクロール時間設定、アニメーション時間設定、マウス通過時に停止するかどうかの設定をサポート

デフォルトの構成パラメータは変更可能です

$(".content").easyroll({ //デフォルトの設定パラメータの方向: "left", //スクロール方向左 (左) 右 (右) 上 (上) 下 (下) デフォルトの左番号: " 1", //各スクロールのデフォルト数は 1 遅延: "1000", //アニメーションを完了するのに必要なデフォルト時間は 1000 で、これは 1 秒のスクロールに等しい: "1000", //デフォルトの時間間隔各アニメーションの 1000 は 1 秒に相当します fadein:false,//フェードインまたはフェードアウトをサポートするかどうか、デフォルトは false enterStop:true //スクロールを一時停止するためにマウスが移動するかどうか、デフォルトは true })

HTML コード:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滚动插件（支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置）</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/scroll.js" type="text/javascript"></script>
</head>
<style>
*{ margin: 0px; padding: 0px;}
.content{ width: 1010px; height:102px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }
.content ul{list-style: none; margin: 0px; padding: 0px; }
.content ul li{ width: 100px; height: 100px; border:#ccc solid 1px; overflow: hidden;cursor: pointer;}
</style>
<body>
<h1 id="支持上下左右-淡入淡出-滚动时间设置-动画时间设置-鼠标经过是否停止设置">支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置</h1>
<div class="content">
<ul type="box">
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/150210/1-15021010125I64-lp.jpg"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/150210/1-1502100934032T-lp.png"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/150209/1-1502092312470-L.gif"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/150209/1-1502091243010-L.jpg"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/150208/1-15020Q549320-L.jpg"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/150204/1-150204143012445.jpg"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/150208/1-15020Q94340510.jpg"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/150207/1-15020GG54I43.jpg"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/131024/89.jpg"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/131024/85.png"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/131024/84.png"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/131024/83.jpg"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/131024/82.png"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/131024/81.png"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="uploads/allimg/131024/78.png"  class="lazy" alt="jQueryプラグインのスクロールでシームレスなスクロールを実現effect_jquery" ></li>
</ul>
</div>
<div>
$(".content").easysroll({<br>
//默认配置参数<br>
direction: "left", //滚动方向 left（向左）right（向右） top(向上) bottom(向下) 默认left<br>
numberr: "1", //每一次滚动数量 默认是1<br>
delays:"1000",//完成一次动画所需时间 默认是1000等于1秒<br>
scrolling: "1000",//每一次动画的时间间隔 默认是1000等于1秒<br>
fadein:false,//是否支持淡入或淡出 默认false<br>
enterStop:true; //鼠标移入是否暂停滚动 默认是true<br>
<br>
})<br>
<br>
</div>
<script>
$(".content").easysroll({
//默认配置参数
direction: "left", //滚动方向 left（向左）right（向右） top(向上) bottom(向下) 默认left
numberr: "1", //每一次滚动数量 默认是1
delays:"1000",//完成一次动画所需时间 默认是1000等于1秒
scrolling: "1000",//每一次动画的时间间隔 默认是1000等于1秒
fadein:false,//是否支持淡入或淡出 默认false
enterStop:true; //鼠标移入是否暂停滚动 默认是true
})
</script>
</body>
</html>

JS コアコード

(function ($) {
$.fn.easysroll= function(options) {
var parameter= {
direction: "left",
numberr: "1",
delays:"1000",
scrolling: "1000",
fadein: false,
enterStop:true
};
var ops = $.extend(parameter,options);
var $this=$(this);
var _this=this;
var _time=null;
var obj=_this.find("[type='box']");
var items=obj.find("li");
var itemsleg=items.length;
var itemsW=items.outerWidth(true);
var itemsH=items.outerHeight(true);
var _direction=ops.direction;
var _numberr =ops.numberr;
var _delays=ops.delays;
var _scrolling =ops.scrolling;
var _fadein=ops.fadein;
var _enterStop=ops.enterStop;
if(_direction=="top" || _direction=="bottom")
{
items.css({"float":"none"});
obj.width(itemsW*itemsleg);
if(_direction=="bottom") {
obj.css("margin-top",-_numberr*itemsH);
}
}else if(_direction=="left" || _direction=="right"){
items.css({"float":"left"});
obj.width(itemsW*itemsleg);
if(_direction=="right") {
obj.css("margin-left",-_numberr*itemsW);
}
}else{
alert("您配置的滚动方向有误，请重新配置");
return true;
}
function scroll(){
if(_direction=="left"){
obj.animate({"margin-left":-_numberr*itemsW},Number(_delays),function(){
for (var i=0;i<_numberr;i++){
obj.find("li").eq(0).appendTo(obj);
}
obj.css({"margin-left":0})
if(_fadein){
obj.find("li").eq(0).animate({"opacity":0},Number(_delays));
obj.find("li").eq(itemsleg-1).css({"opacity":1});
}
});
}else if(_direction=="right"){
obj.animate({"margin-left":0},Number(_delays),function(){
for(var i=0;i<_numberr;i++){
obj.find("li").eq(itemsleg-1).prependTo(obj);
};
obj.css("margin-left",-_numberr*itemsW);
if(_fadein){
obj.find("li").eq(0).animate({"opacity":1},Number(_delays));
obj.find("li").eq(itemsleg-1).css({"opacity":0});
}
});
}else if(_direction=="top"){
obj.animate({"margin-top":-_numberr*itemsH},Number(_delays),function(){
for (var i=0;i<_numberr;i++){
obj.find("li").eq(0).appendTo(obj);
}
obj.css({"margin-top":0});
if(_fadein){
obj.find("li").eq(0).animate({"opacity":0},Number(_delays));
obj.find("li").eq(itemsleg-1).css({"opacity":1});
}
});
}else if(_direction=="bottom"){
obj.animate({"margin-top":0},Number(_delays),function(){
for(var i=0;i<_numberr;i++){
obj.find("li").eq(itemsleg-1).prependTo(obj);
}
obj.css("margin-top",-_numberr*itemsH);
if(_fadein){
obj.find("li").eq(0).animate({"opacity":1},Number(_delays));
obj.find("li").eq(itemsleg-1).css({"opacity":0});
}
});
}
}
$this.hover(function(){
if(_enterStop){
clearInterval(_time);
}
},function(){
_time= setInterval(scroll,_scrolling);
}).trigger('mouseleave');
}
})(jQuery);

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

声明

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

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

See all articles