• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：スクロールしてもついてくる（iPhone版））

スクロールしてもついてくる吹き出しを実装する方法

このQ&Aのポイント
  • CSSの「position:fixed」ではスクロールしてもついてこない吹き出しを実現することはできず、JavaScriptのライブラリ「iscroll」を使用する必要がある。
  • 「iscroll」を使用することで、スクロールしてもついてくる吹き出しを実現できるが、URLバーの隠蔽はできない。
  • iPhone版のYahooのような「ホーム画面に追加しよう」という吹き出しを表示するには、JavaScriptで実装する必要があり、具体的な記述方法は不明。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.4

//その２ 　function Elevator_cuddleHeight (position) { 　　var ary_cuddle_height = ['top', 'middle', 'bottom']; 　　var type_no; 　　 　　if (! position) 　　　position = 'top'; 　　 　　type_no = ary_cuddle_height.indexOf (position.toLowerCase ()); 　　if (0 > type_no) 　　　throw new Error ('指定できない値'); 　　 　　return type_no; 　} 　function Elevator_cuddleWidth (position) { 　　var ary_cuddle_width = ['left', 'center', 'right']; 　　var type_no; 　　 　　if (! position) 　　　position = 'left'; 　　 　　type_no = ary_cuddle_width.indexOf (position.toLowerCase ()); 　　if (0 > type_no) 　　　throw new Error ('指定できない値'); 　　 　　return type_no; 　} 　 　Elevator.prototype.start　　　 = Elevator_start; 　Elevator.prototype.stop　　　　= Elevator_stop; //_______________________________________ 　 　var Manager = new function () { 　　var stocker = new Singleton; 　　var ary_cuddle_height = ['top', 'middle', 'bottom']; 　　var ary_cuddle_width = ['left', 'center', 'right']; 　　 　　 　　this.handleEvent = 　　　(function (event) { 　　　　 switch (event.type) { 　　　　 case 'scroll' : 　　　　　 stocker.getAllOptions().forEach (function (obj) { obj.method ('start'); }); 　　　　　 break; 　　　 　　　　 case 'unload' : 　　　　　 document.removeEventListener ('scroll', this, false); 　　　　　 window.removeEventListener ('unload', this, false); 　　　　　 break; 　　　　 } 　　　 }); 　　this.create = 　　　(function (target, parm, cbFunc, cbObject) { 　　　　 if (1 > arguments.length) 　　　　　 return null; 　　　　 　　　　 if (stocker.contains (target)) 　　　　　 return stocker.getOption (target); 　　　　 　　　　 var elevator = new Elevator (target, { 　　　　　　 'accell'　　　: parm.accell || 2, 　　　　　　 'interval'　　: parm.interval || 50, 　　　　　　 'cuddleHeight': Elevator_cuddleHeight (parm.cuddleHeight), 　　　　　　 'cuddleWidth' : Elevator_cuddleWidth (parm.cuddleWidth), 　　　　　　 'offsetY'　　 : parm.offsetY || 0, 　　　　　　 'offsetX'　　 : parm.offsetX || 0 　　　　　 }, cbFunc, cbObject); 　　　　　target.style.position = 'absolute'; 　　　　　elevator.start (); 　　　　　 　　　　　var controller = Controller (elevator); 　　　　　stocker.add (target, controller); 　　　　　return controller; 　　　}); 　　document.addEventListener ('scroll', this, false); 　　window.addEventListener ('unload', this, false); 　}; 　 　this.Elevator = Manager; })(); var li = document.querySelectorAll ('li'); Elevator.create (li[0], {accell:4,　interval: 10 }); Elevator.create (li[1], {accell:8, interval: 10, cuddleWidth: 'center' }); Elevator.create (li[2], {accell:12, interval: 10, cuddleWidth: 'right' }); Elevator.create (li[3], {accell:16, interval: 10, cuddleHeight: 'middle', cuddleWidth: 'right' }); Elevator.create (li[4], {accell:20, interval: 10, cuddleHeight: 'bottom', cuddleWidth: 'right' }); Elevator.create (li[5], {accell:24, interval: 10, cuddleHeight: 'bottom', cuddleWidth: 'center' }); Elevator.create (li[6], {accell:28, interval: 10, cuddleHeight: 'bottom'}); Elevator.create (li[7], {accell:32, interval: 10, cuddleHeight: 'middle'}); Elevator.create (li[8], {accell:36, interval: 10, cuddleHeight: 'middle', cuddleWidth: 'center' }); </script> しほうはっぽうに、せっていできた～！

ok-rjak
質問者

お礼

こちらもすばらしいですね。 参考にさせていただきます。

すると、全ての回答が全文表示されます。

その他の回答 (3)

回答No.3

ながいので、ぶんかつです。その１ <!DOCTYPE html> <html lang="ja"> <head> 　<title></title> 　<meta charset="utf-8"> 　<meta name="viewport" content="width=320"> 　<style> ol { 　list-style:none; } ol > li { 　width : 50px; 　height: 50px; 　border:6px red solid; 　padding:2px; 　text-align:center; } p { 　margin: 20em 0; } 　</style> </head> <body> <h1>Test</h1> <p>a<p>b<p>c<p>d<p>e<p>f<p>g<p>h<p>i<p>j<p>k<p>l <ol> 　<li>左上 　<li>中央上 　<li>右上 　<li>右中央 　<li>右下 　<li>中央下 　<li>左下 　<li>左中央 　<li>ど真ん中 <ol> <script> (function () { 　var DOC = document; 　var VIEW = DOC.defaultView; //_______________________________________ 　function Singleton () { 　　var target_stock = []; 　　var option_stock = []; 　　 　　return new function () { 　　　this.contains = 　　　　(function (/*target, target2, ..*/) { 　　　　　 return Array.prototype.some.call (arguments, function (target) { 　　　　　　 return (-1 < this.indexOf (target)); }, target_stock); }); 　　　 　　　this.add = 　　　　(function add (target, option) { 　　　　　 if (! this.contains (target)) { 　　　　　　 target_stock.push (target); 　　　　　　 option_stock.push (option); 　　　　　 }}); 　　　 　　　this.getOption = 　　　　(function (target) { 　　　　　 var index = target_stock.indexof (target); 　　　　　 return (-1 < index) ? option_stock[index]: null; }); 　　　 　　　this.getAllOptions = 　　　　(function () { return option_stock.slice (0); }); 　　}; 　} 　 //_______________________________________ 　function Controller (obj) { 　　if (1 > arguments.length) 　　　return null; 　　 　　return new function () { 　　　this.getAttribute = 　　　　(function (attr) { return (obj.hasOwnProperty (attr)) ? obj[attr]: undefined; }); 　　　 　　　this.setAttribute = 　　　　(function (attr, val) { 　　　　　 if (obj.hasOwnProperty (attr)) 　　　　　　 obj[attr] = val; }); 　　　 　　　this.method = 　　　　(function (name/*,arg0, arg1,..*/) { 　　　　　 if ('function' === typeof obj[name]) 　　　　　　 return obj[name].apply (obj, Array.prototype.slice.call (arguments, 1)); }); 　　}; 　} //_______________________________________ 　function Locator (x, y) { 　　this.top = y + 'px'; 　　this.left = x + 'px'; 　} 　 //_______________________________________ 　function Elevator (target, parm, cbFunc, cbObject) { 　　this.target　　 = target; 　　this.accell　 = parm.accell; 　　this.interval = parm.interval; 　　this.cuddleHeight = parm.cuddleHeight; 　　this.cuddleWidth = parm.cuddleWidth; 　　this.offsetX　 = parm.offsetY; 　　this.offsetY　 = parm.offsetX; 　　this.timerId　= null; 　　this.cbFunc = cbFunc; 　　this.cbObject = cbObject; 　} //_______________________________________ 　function Elevator_start () { 　　if (! this.timerId) 　　　this.timerId = setInterval (function (that) { Elevator_onTimer.call (that) }, this.interval, this); 　}; 　function Elevator_stop () { 　　if (this.timerId) { 　　　clearInterval (this.timerId); 　　　this.timerId = null; 　　} 　}; 　function Elevator_onTimer () { 　　var e = this.target; 　　var s = e.style; 　　var a = this.accell; 　　 　　var py = window.pageYOffset - this.offsetY; 　　var px = window.pageXOffset - this.offsetX; 　　switch (this.cuddleHeight) { 　　case 1 : py += Math.floor (window.innerHeight / 2 - e.offsetHeight / 2); break; 　　case 2 : py += Math.floor (window.innerHeight - e.offsetHeight); break; 　　} 　　 　　switch (this.cuddleWidth) { 　　case 1 : px += Math.floor (window.innerWidth / 2 - e.offsetWidth / 2); break; 　　case 2 : px += Math.floor (window.innerWidth - e.offsetWidth); break; 　　} 　　var diffX = px - e.offsetLeft; 　　var diffY = py - e.offsetTop; 　　 　　if (0 === diffX) 　　　if (0 === diffY) 　　　　Elevator_stop.call (this); 　　var x = e.offsetLeft + Math.floor (diffX / a + (0 < diffX)); 　　var y = e.offsetTop + Math.floor (diffY / a + (0 < diffY)); 　　Locator.call (s, x, y); 　}; 　

すると、全ての回答が全文表示されます。
回答No.2

「エレベーターメニュー」で検索してみてください。

ok-rjak
質問者

補足

iPhone版では無さそうなのですが、URLなどありましたら、お願いします。

すると、全ての回答が全文表示されます。
回答No.1

かこにかいたものが、iPodTouch でもうごきました。 おふせっとのきじゅんは、みぎしたからです。 ぜんかくくうはくは、はんかくにしてね。 <!DOCTYPE html> <html lang="ja"> <head> 　<title></title> 　<meta charset="utf-8"> 　<meta name="viewport" content="width=320"> 　<style> #hoge, #huga { 　width : 200px; 　height: 80px; 　border:6px red double; 　padding:2px; } p {margin:5em 0} 　</style> </head> <body> <h1>Test</h1> <p>a<p>b<p>c<p>d<p>e<p>f<p>g<p>h<p>i<p>j<p>k<p>l <div id="hoge">けっきょくじゅうようなのは、「ひらがな」でなくてぷろぐらむだよな！</div> <div id="huga">じぶんのべんきょうのためにかいてるのだし、せつめいをもとめられても</div> <script> (function () { //@cc_on 　function Elevator (arg) { 　　this.view　　 = arg.view; 　　this.body　　 = arg.body; 　　this.node　　 = arg.node; 　　this.accell　 = arg.accell; 　　this.interval = arg.interval; 　　this.offset　 = arg.offset; 　　this.timerId　= null; 　} 　function Decorator (alpha) { 　　if (alpha < 0) 　　　return this.visibility = 'hidden'; 　　 　　if (100 < alpha) 　　　alpha = 100; 　　 　　this.visibility = 'visible'; 　　 　　 /*@if (@_jscript) 　　this.filter = 'Alpha(opacity=' + alpha + ')'; @else@*/ 　　this.opacity = String (alpha / 100); /*@end@*/ 　} 　function Locator (x, y) { 　　this.top = y + 'px'; 　　this.left = x + 'px'; 　} 　 　function Elevator_start () { 　　if (! this.timerId) { 　　　var that = this; 　　　var cbFunc = function () { Elevator_onTimer.call (that) }; 　　　this.timerId = this.view.setInterval (cbFunc, this.interval); 　　} 　}; 　function Elevator_stop () { 　　if (this.timerId) { 　　　this.view.clearInterval (this.timerId); 　　　this.timerId = null; 　　　Decorator.call (this.style, -1); 　　} 　}; 　function Elevator_onTimer () { 　　var e = this.node; 　　var b = this.body; 　　var v = this.view; 　　var s = e.style; 　　var a = this.accell; 　　var o = this.offset; 　　 　　var offsetX = b.clientWidth - e.offsetWidth - o.x; 　　var offsetY = b.clientHeight -e.offsetHeight - o.y; 　　var pointerX = /*@if (@_jscript) b.scrollLeft @else@*/ v.pageXOffset /*@end@*/ + offsetX; 　　var pointerY = /*@if (@_jscript) b.scrollTop　@else@*/ v.pageYOffset /*@end@*/ + offsetY; 　　 　　var diffX = pointerX - e.offsetLeft; 　　var diffY = pointerY - e.offsetTop; 　　 　　/* 　　if (0 === diffX) 　　　if (0=== diffY) 　　　　Elevator_stop.call (this); 　　*/ 　　var x = e.offsetLeft + Math.floor (diffX / a + (0 < diffX)); 　　var y = e.offsetTop + Math.floor (diffY / a + (0 < diffY)); 　　Decorator.call (s, y - offsetY); 　　Locator.call (s, x, y); 　}; 　function Elevator_init (target, accell, interval, offset) { 　　if (1 > arguments.length) 　　　return null; 　　 　　var doc = target.ownerDocument; 　　var view = doc./*@if (@_jscript) parentWindow @else@*/ defaultView /*@end@*/; 　　var style = target.style; 　　var arg = { 　　　view　　 : doc./*@if (@_jscript) parentWindow @else@*/ defaultView /*@end@*/, 　　　body　　 : doc[(doc.compatMode == 'CSS1Compat') ? 'documentElement' : 'body'], 　　　node　　 : target, 　　　accell　 : accell || 2, 　　　interval : interval || 50, 　　　offset　 : offset || { x: 20, y: 50 } 　　}; 　　var elevator = new Elevator (arg); 　　 　　function onScroll (evt) { 　　　Elevator_start.call (elevator); 　　} 　　function onUnload (evt) { 　　　doc./*@if (@_jscript) detachEvent ('on' + @else@*/ removeEventListener ( /*@end@*/ 'scroll', onScroll, false); 　　　view./*@if (@_jscript) detachEvent ('on' + @else@*/ removeEventListener ( /*@end@*/ 'unload', arguments.callee, false); 　　　 　　　view = doc = 　　　　style = arg = elevator 　　　　onScroll = onUnload = 　　　　　null; 　　} 　　doc./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'scroll', onScroll, false); 　　view./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'unload', onUnload, false); 　　style.position = 'absolute'; 　　elevator.start (); 　　return elevator; 　} 　Elevator.init = Elevator_init; 　 　Elevator.prototype.start　 = Elevator_start; 　Elevator.prototype.stop　　= Elevator_stop; 　 　this.Elevator = Elevator; 　 })(); 　Elevator.init (document.getElementById ('hoge'),7,30,{x:54, y:0}); 　Elevator.init (document.getElementById ('huga'),10,30,{x:54, y:100}); </script>

ok-rjak
質問者

お礼

すごいです。 ありがとうございます。ほぼ希望の動きです。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する