締切済み

フローティグメニュー内に画像を嵌め込むについて

2011/04/01 01:51

宜しくお願いします。今つくってるサイトに、フローティグメニューの機能を実装しようと思います。フローティグメニューは初めての導入ですので、試行錯誤しながら取り入れるつもりです。そこで質問です。タイトルにありますように、フローティングさせるコード内に、画像を<img src= >などではめても動いてくれるのでしょうか？ <div> <ul> <li>リンクＡ</li> 　<li>リンクＢ</li> 　<li>リンクＣ</li> </ul> </div> このようなリストだけなら、ブラウザ上、テキストだけのレンダリングなので、スムーズに動いてくれると思いますが、例えば、 <div> <img src width 450px height 530px> <ul> <li>リンクＡ</li> 　<li>リンクＢ</li> 　<li>リンクＣ</li> </ul> </div> のように画像を取り込んだdiv全体をフローティングすることは可能なのでしょうか？また、可能であるならば、動きはスムーズに行くものでしょうか？（画像サイズやＰＣ環境に左右される？）自分で研究して結果を見ればわかることだと思いますが、何分、時間の制約に限りがあり、導入まえに結果を知りたく思います。経験されたかた、何卒お力をお貸し下さいませ。

n-yuuki
お礼率76% (218/285)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

みんなの回答

babu_baboo
ベストアンサー率51% (268/525)

2011/04/02 10:32 回答No.1

すむ～ずかは、たしかめてね。 <!DOCTYPE html> <title></title> <style type="text/css"> #menu { 　width : 300px; 　height: 300px; 　overflow:hidden; 　position:absolute; } </style> <body> <div id="menu"> 　<img src="./img/0.gif" width="50" height="50" alt="0"> 　<ul> 　　<li>被災地より　　　<ul> 　　　　<li>義援金・応援ありがとうございます</li> 　　　</ul> 　　</li> 　</ul> </div> <script> function kuru2 (element, positionX, positionY, radius, angle, step) { 　step = step || 1; 　angle = angle || 0; 　　var deg = Math.PI / 180; 　var sin = Math.sin; 　var cos = Math.cos; 　var style = element.style; 　return function () { 　　var x = (positionX + cos (angle * deg) * radius) |0; 　　var y = (positionY - sin (angle * deg) * radius) |0; 　　style.left = x + 'px'; 　　style.top = y + 'px'; 　　angle += step; 　}; } setInterval (kuru2 (document.getElementById ('menu'), 200, 200, 180), 30); </script>

質問者