demo01.htm
コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryローリングシャッターエフェクト実装コード(別方向)_jquery

jqueryローリングシャッターエフェクト実装コード(別方向)_jquery

WBOY
リリース： 2016-05-16 17:42:05
オリジナル
1375 人が閲覧しました
jqueryローリングシャッターエフェクト実装コード(別方向)_jquery
demo01.htm
复制代码代码如下:





方向逆馈



方向逆馈


反馈方向







rollingMask-0.1.0.js
复制代码代码如下:

/**
* ローラーブラインドのさまざまな方向への効果
*
**/
$.extend({
rollingMask:function(opt,callback){
this.defaults = {
objId:"", //容器id
content:"test", // 卷帘内容
opacity: 0.8,
fadeSpeed:150 // 卷帘消失時間
}// パラメータ初期化 var opts = $.extend(this.defaults,opt);

var contentId = opts.objId "_content";
var showId = opts.objId "_show"; $("#" opts.objId).bind("mouseenter Mouseleave",
function(e) {
var w = $(this).width();
var h = $(this) .height();
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); .pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var 方向 = Math.round(((Math.atan2(y, x) * (180 / Math.PI)) 180) / 90) 3) % 4;
var eventsType = e.type;

if(e.type == 'mouseenter'){
$("#" opts.objId).append("
opts.content "
");
$("#" contentId).css ({
"位置":"絶対",
"幅":w "px",
"高さ":h "px",
"上":"0px",
"left":"0px",
"background":"#F55",
opacity:opts.opacity
});
switch(direction){
case 0:
$("#" contentId).css("top",-h "px");
休憩;
ケース 1:
$("#" contentId).css("left",w "px");
休憩;
ケース 2:
$("#" contentId).css("top",h "px");
休憩;
ケース 3:
$("#" contentId).css("left",-w "px");
休憩;
}
$("#" contentId).animate({"top":"0px","left":"0px"});
}else{
$("#" contentId).fadeOut(opts.fadeSpeed, function(){
$("#" contentId).remove();
});
}
}
);
}
});

関連ラベル：
卷帘 不同方向
ソース：php.cn
前の記事：jqueryロードイベント(コールバック/データ)の利用方法と注意点_jquery 次の記事：JQuery スライドショーの小さな問題 (問題の見つけ方と解決方法)_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PHPカールでブール値をtrueに設定する方法 このphpでfixed_rateブール値を設定する方法curl truefixed_rate (オプション) - ブール値。trueまたはfalseにすることができます。利用可能な...
から 2024-03-30 21:25:31
0
1
360
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート