- 締切済み
フローティグメニュー内に画像を嵌め込むについて
宜しくお願いします。 今つくってるサイトに、フローティグメニューの機能を実装しようと思います。 フローティグメニューは初めての導入ですので、試行錯誤しながら取り入れるつもりです。 そこで質問です。 タイトルにありますように、 フローティングさせるコード内に、画像を<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)
すむ～ずかは、たしかめてね。 <!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>
お礼
ご丁寧に有難うございます。 後ほど、試させていただき、まずはお礼のコメントとなります。