10月 312013
 

こんばんは。ファガイです。

今回は、少しだけ書きます。jQueryを使って横スクロールを実現する方法です。

例えば、ulタグにliで画像等を横並びで出したいとかいう時に使える。

html
“`

  • 1
  • 2
  • 3

“`

css
[css]
div{
width: XXX;
overflow: auto;
}
li {
width: XXX;
float: left;
}
[/css]

javascript
“`
;(function($)
{
$(function(){
li_width = $(“ul li”).outerWitdh(true);
li_count = $(“ul li”).length;

$(“ul”).width(li_width * li_count);
});
})(jQuery);
“`

こんな感じですかね。
今回、outerWidthが便利すぎた。outerWidthはborderとかmarginとかを合わせたwidthを返してくれます。これで結構楽になれました。

Pocket

 Posted by at 6:01 PM

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*