- ベストアンサー
スクロールしてもついてくる吹き出しを実装する方法
- CSSの「position:fixed」ではスクロールしてもついてこない吹き出しを実現することはできず、JavaScriptのライブラリ「iscroll」を使用する必要がある。
- 「iscroll」を使用することで、スクロールしてもついてくる吹き出しを実現できるが、URLバーの隠蔽はできない。
- iPhone版のYahooのような「ホーム画面に追加しよう」という吹き出しを表示するには、JavaScriptで実装する必要があり、具体的な記述方法は不明。
- ok-rjak
- お礼率51% (63/122)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （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> しほうはっぽうに、せっていできた～！
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
ながいので、ぶんかつです。その１ <!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); };
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
「エレベーターメニュー」で検索してみてください。
補足
iPhone版では無さそうなのですが、URLなどありましたら、お願いします。
- babu_baboo
- ベストアンサー率51% (268/525)
かこにかいたものが、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>
お礼
すごいです。 ありがとうございます。ほぼ希望の動きです。
お礼
こちらもすばらしいですね。 参考にさせていただきます。