読者です 読者をやめる 読者になる 読者になる

WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

リストを円形にできるExtremes

f:id:mmmmofu:20170512002048p:plain

公式サイト
Extremes jQuery plug-in

デモ
http://efu.sakura.ne.jp/web/extremes/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Extremes</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <style>
    body {
      background: #111;
      color: #666;
    }
    .extremes {
      margin: 50px auto;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/extremes.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <ul class="extremes">
    <li>Lorem ipsum</li>
    <li>dolor sit ame onsectetur</li>
    <li>cadipiscing elit</li>
    <li>sed do eiusmod</li>
    <li>tempor incididunt</li>
    <li>ut labore et dolore</li>
    <li>magna aliqua Ut enim ad</li>
    <li>minim veniam quis nostrud</li>
    <li>exercitation ullamco</li>
    <li>laboris nisi ut aliquip e</li>
    <li>x ea commodo consequat</li>
    <li>Duis aute irure</li>
    <li>dolor in reprehenderit in</li>
    <li>voluptate velit esse </li>
    <li>cillum dolore eu fugiat nulla</li>
    <li>pariatur. Excepteur Excepteur</li>
    <li>sint occaecat cupidatatnon</li>
    <li>proident sunt in culpa</li>
    <li>qui officia deserunt mollit</li>
    <li>anim id est laborum.</li>
  </ul>
</body>
</html>
$(function(){
  $('.extremes').extremes({
    diameter: 100
  });
});