jquery

[prettyPhoto]GoogleMap等のインラインフレーム用のリンク

Im00221123_223105

リンク先のURLに『iframe』を付けて
幅と縦の指定を合わせてリンクを作ればOK


「prettyPhoto.map.html」をダウンロード

ソースを見る

| | コメント (0)

[JQUERY] toggleのリセット

JQUERYの.toggle()は
CSS属性が最終的に
『display: none』になります。
そのために
画面上から消えるわけなので

戻す『リセット』するには
display: noneを戻せばいいわけです。

opacityとtoggleの違い
Force4u00221106_145805


| | コメント (0)

[jquery]animate

jqueryのanimateについてデモ

Force4u00221105_235945


 

「jquery.animate.html」をダウンロード

「jquery.animate.html.txt」をダウンロード

 


「jquery.animate.02.html」をダウンロード

「jquery.animate.02.html.txt」をダウンロード


 

//ボックス1を400px移動
$('#box_1').click(function(){
$('#box_1').animate({
'top':'400px'
});
});

//ボックス2をslowで移動
$('#box_2').click(function(){
$('#box_2').animate({
'top':'400px'
},'slow');
});

//ボックス3をswingで2秒かけて移動
$('#box_3').click(function(){
$('#box_3').animate({
'top':'400px'
},2000,'swing');
});

//ボックス4をlinearで2秒かけて移動
$('#box_4').click(function(){
$('#box_4').animate({
'top':'400px'
},2000,'linear');
});

 


$('#reset').click(function(){
$('#box_1').css({'top':'','left':''});$('#box_2').css({'top':'','left':''});
$('#box_3').css({'top':'','opacity':1.0});$('#box_4').css({'top':'','opacity':'1.0','display':'block'});
});

$("#go4").click(function(){
  $("div").css({width:"", fontSize:"", borderWidth:""});
});

//ボックス1を右下へ移動
$('#box_1').click(function(){
$('#box_1').animate({
'top':'400px',
'left':'320px'
});
});

//ボックス2をクリックの回数分移動
$('#box_2').click(function(){
$('#box_2').animate({
'top':'+=20px',
'left':'-=20px'
},'2000');
});

//ボックス3をswingで2秒かけて移動して透過0.0付ける
$('#box_3').click(function(){
$('#box_3').animate({
'top':'400px',
'opacity': 0.0
},2000,'swing');
});

//ボックス4をlinearで2秒かけて移動toggle
$('#box_4').click(function(){
$('#box_4').animate({
'height': 'toggle',
'top':'400px',
'opacity': 'toggle'
},2000,'linear');
});

 


toggleは内部的には
CSSで display:noneになっているので
display:none→blockなりinlineでリセットされる


    

| | コメント (0)

[jquery]event

jqueryのeventに関するビデオ

Force4u00221105_22330
YouTube - jQuery Events Part 1[YOUTUBE]新しいウィンドで開きます

これからは何するにしても
『ビデオ』は重要だなぁ
とてもわかりやすいですよね。

 

自分もYouTubeチャンネルやってますが
チュートリアルビデオって難しい。
『何を伝えるために』

『何を見せるのか』
なんですけどね

 

ちなみに
こんな感じですね

「jquery_event.html.txt」をダウンロード[LINK]新しいウィンドで開きます

「jquery_event.html」[LINK]新しいウィンドで開きます
 

<ul class="boxes">

<li class="box_1">1</li>
<li class="box_2">2</li>
<li class="box_3">3</li>
<li class="box_4">4</li>

<li class="box_5">5</li>
<li class="box_6">6</li>
<li class="box_7">7</li>
<li class="box_8">8</li>

</ul> 
<div class="clear"></div>
</div>

//ボックス1にクリックイベントを付ける
$('.box_1').bind('click',function(){
alert("1番をクリックしました");
});

//ボックス2にクリックイベントを付ける
$('.box_2').click(function(){
prompt("2番をクリックしました");
});

//ボックス3にクリックで背景色を変える
$('.box_3').click(function(){
$(this).css('background','#e8f3fe');
});

//ボックス4にマウスオーバーで背景色を変える
$('.box_4').mouseover(function(){
$(this).css('background','#e8f3fe');
$(this).mouseout(function(){
$(this).css('background','#9cc3eb');
});
});

//ボックス5にクリックで隠す
$('.box_5').click(function(){
$('.box_5').hide();
});

//ボックス6にダブルクリックでテキストを変える
$('.box_6').dblclick(function(){
$(this).text('123456');
});


//ボックス7にクリックでカウントアップ
var counti = 9;
$('.box_7').click(function(){
$('.box_5').text(++counti);
$('.box_6').text(++counti);
$('.box_7').text(++counti);
$('.box_8').text(++counti);
});

//ボックス8にマウスオーバーとマウスアウト
$('.box_8').mouseover(function(){
$(this).css('background','#e8f3fe');
$(this).css('width','50px');
$(this).mouseout(function(){
$(this).css('background','#9cc3eb');
$(this).css('width','180px');
});
})

| | コメント (0)

その他のカテゴリー

Accessibility AccessibilityCheck AccessibilityForm AccessibilityInDesign AccessibilityPDF Acrobat Acrobat Action Acrobat Annotation Acrobat AppleScripts Acrobat Character Acrobat Layer Acrobat PDF Embed API Acrobat PDF Form Print Acrobat Plug-ins Acrobat Portfolios Acrobat Print AcrobatBarcode AcrobatDialog AcrobatForm AcrobatJS AcrobatMenu AcrobatPDF AcrobatStamp AcrobatYouTube AddressBook Adobe Adobe InDesign Adobe Photoshop AdobeAppleScript AdobeBridge AdobeIllustrator AdobeJSX aed Alfresco Android AnimationGif Apple AppleScript AppleScriptBasics AppleScriptCharacter AppleScriptColor AppleScriptDroplet AppleScriptErrorNum AppleScriptFolder AppleScriptFontBook AppleScriptRename AppleScriptTools AppleSymbols Applications Barcode Barcode2D BarcodePostal BetterHTMLExport Book BOX Browser buzz Certificates CharacterEntity CharacterSets Colors Cool Site CSS Cutting DecoMail DecorationMail Design Desktop Diff DJ dmg DNS Documents Download DTP eBook Editer eMail Envelopes ExifTool Facebook FFmpeg File System Fonts FontsTool FontsWeb FOOD FormPrint ftp Gadget Gif Animation Google Google Chrome Enterprise HexEditor HTML info iPhoto ISBN ISO iTunes iWork iWorkNumbers iWorkNumbersCalendar iWorkNumbersTimecard iWorkPages JavaScript JeditX JeditX Regexp JeditXAppleScript JIS jquery Letterpress Library logo Mac Admin Mac Archiver Mac Browser Mac Browser Plugin Mac QuickLook Mac Setup Mac Spotlight Mac Video Map Memo Microsoft Teams Mobby mobileconfig Moto Movies Music Network Basic ntp OCR Office OfficePowerPoint OSX Paint Pantone Paper PDFlib Permission Photo Pictograms Print Public Python QuickLook QuickTime QuickTimeSetting QuickTimeSound Real Media ReName ResourceFork ruby Sample Screen ScreenCast Search Security SEO Sharing SLAResource Sound Spotlight Stamp SWF TCC.db Tutorial PSD TV Twitter Typography Unicode Utilities Video WEB APP WebFont Wedding Windows WindowsMedia XML XMP XPS YouTube YouTube Rss