假设我们想限制只能 调整垂直方向上的高度,通过指定应该添加的拖动手柄即可

2017-06-30 17:30:00
admin
原创
345
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery Book Browser</title>

	<link rel="stylesheet" href="http://code.ybao.org/demo/src/p/p.css" type="text/css" />
    <link rel="stylesheet" href="http://code.ybao.org/demo/src/p/ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />

    <script src="http://code.ybao.org/js/jquery.js"></script>
    <script src="http://code.ybao.org/demo/src/p/jquery.cycle.all.js"></script>
    <script src="http://code.ybao.org/demo/src/p/jquery.cookie.js"></script>
    <script src="http://code.ybao.org/demo/src/p/jquery-ui-1.10.0.custom.min.js"></script>
    <script>
$(document).ready(function() {
  var $books = $('#books').cycle({
    timeout: 2000,
    speed: 200,
    pause: true
  });
  if ( $.cookie('cyclePaused') ) {
    $books.cycle('pause');
  }
  var $controls = $('<div id="books-controls"></div>').insertAfter($books);
  $('<button>Pause</button>').click(function(event) {
    event.preventDefault();
    $books.cycle('pause');
    $.cookie('cyclePaused', 'y');
  }).appendTo($controls);
  $('<button>Resume</button>').click(function(event) {
    event.preventDefault();
    var $paused = $('ul:paused');
    if ($paused.length) {
      $paused.cycle('resume');
      $.cookie('cyclePaused', null);
    }
    else {
      $(this).effect('shake', {
        distance: 10
      });
    }
  }).appendTo($controls);

  $books.hover(function() {
    $books.find('.title').animate({
      backgroundColor: '#eee',
      color: '#000'
    }, 1000);
  }, function() {
    $books.find('.title').animate({
      backgroundColor: '#000',
      color: '#fff'
    }, 1000);
  });

  $('h1').click(function() {
    $(this).toggleClass('highlighted', 'slow', 'easeInExpo');
  });

  $('#books .title').resizable({
    handles: 's'
  });
});

	</script>
  </head>
  <body>
    <div id="container">
      <h1>Selected jQuery Books</h1>
      <ul id="books">
        <li>
          <img src="http://code.ybao.org/demo/src/p/images/jq-game.jpg" alt="jQuery Game Development Essentials" />
          <div class="title">jQuery Game Development Essentials</div>
          <div class="author">Salim Arsever</div>
        </li>
        <li>
          <img src="http://code.ybao.org/demo/src/p/images/jqmobile-cookbook.jpg" alt="jQuery Mobile Cookbook" />
          <div class="title">jQuery Mobile Cookbook</div>
          <div class="author">Chetan K Jain</div>
        </li>
        <li>
          <img src="http://code.ybao.org/demo/src/p/images/jquery-designers.jpg" alt="jQuery for Designers" />
          <div class="title">jQuery for Designers</div>
          <div class="author">Natalie MacLees</div>
        </li>
        <li>
          <img src="http://code.ybao.org/demo/src/p/images/jquery-hotshot.jpg" alt="jQuery Hotshot" />
          <div class="title">jQuery Hotshot</div>
          <div class="author">Dan Wellman</div>
        </li>
        <li>
          <img src="http://code.ybao.org/demo/src/p/images/jqui-cookbook.jpg" alt="jQuery UI Cookbook" />
          <div class="title">jQuery UI Cookbook</div>
          <div class="author">Adam Boduch</div>
        </li>
        <li>
          <img src="http://code.ybao.org/demo/src/p/images/mobile-apps.jpg" alt="Creating Mobile Apps with jQuery Mobile" />
          <div class="title">Creating Mobile Apps with jQuery Mobile</div>
          <div class="author">Shane Gliser</div>
        </li>
        <li>
          <img src="http://code.ybao.org/demo/src/p/images/drupal-7.jpg" alt="Drupal 7 Development by Example" />
          <div class="title">Drupal 7 Development by Example</div>
          <div class="author">Kurt Madel</div>
        </li>
        <li>
          <img src="http://code.ybao.org/demo/src/p/images/wp-mobile-apps.jpg" alt="WordPress Mobile Applications with PhoneGap" />
          <div class="title">WordPress Mobile Applications with PhoneGap</div>
          <div class="author">Yuxian Eugene Liang</div>
        </li>
      </ul>
    </div>
  </body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227