jQuery之尺寸调整组件的深入解析

2020-05-24 21:29:22易采站长站整理

</head>
<body>
<div id=”message_box1″ class=”message_box” >
  <div class=”message” >
    <div class=”header”>
      <div>茄菲猫</div>
      <span>×</span></div>
    <img src=”images/jiafeimao.jpg” id=”pic1″/> </div>
</div>
<div id=”wrap”></div>
<script language=”javascript” type=”text/javascript”>
$(document).ready(function(){
 $(“#pic1″).resizable({alsoResize:”#message_box1”,
  minHeight:100,
  minWidth:100,
  start:eventCallback,
  resize:eventCallback,
  stop:eventCallback
  });
 function eventCallback(e, ui) {
  var content = “事件类型:” + e.type + “,当前大小:” + ui.size.width+ “*” + ui.size.height + “,原始大小:”+ui.originalSize.width+”*”+ui.originalSize.height+”<br/>”;
  var message = $(“<span>”).text(content);
  $(“#wrap”).append(content);
 }
});
</script>
</body>
</html>