首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → [JQUERY UI]請問圖片無法正常縮放大小

[JQUERY UI]請問圖片無法正常縮放大小

时间：2009-08-09

来源：互联网

复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>jQuery UI Example Page</title>
  6.         <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />    
  7.         <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  8.         <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  9.         
  10. <style>
  11. #content {
  12.     height: 95%;
  13.     width: 95%;
  14.     position: absolute;
  15. }
  16. #container {
  17.     height: 98%;
  18.     width: 50%;
  19.     border: 3px solid #ccc;
  20.     float: left;
  21. }
  22. #headlist {
  23.     float: right;
  24.     height: 20%;
  25.     width: 48%;
  26.     border: 1px solid #ccc;
  27.     clear: none;
  28. }
  29. #hairlist {
  30.     height: 20%;
  31.     width: 48%;
  32.     border: 1px solid #ccc;
  33.     float: right;
  34.     margin-top: 5px;
  35. }
  36. #fn {
  37.     float: right;
  38.     height: 50%;
  39.     width: 48%;
  40.     margin-top: 5px;
  41.     border: 1px solid #ccc;
  42. }
  43. .myactive {
  44.     opacity: 0.2;
  45.     filter:alpha(opacity:20);
  46. }
  47. .myhover {
  48.     border: 5px solid red;
  49. }
  50. #headlist  img {
  51.     cursor: move;
  52. }
  53. #hairlist  img {
  54.     cursor: move;
  55. }
  56. </style>
  57.         
  58.         
  59.         
  60.         
  61. <script type="text/javascript">
  62. $(document).ready(function(){
  63. var $container = $('#container');
  64.                           
  65.    $(".hairimages").draggable({helper: 'clone'});
  66. $container.droppable({
  67.     accept: ".hairimages",
  68.     activeClass: 'myactive',
  69.     hoverClass: 'myhover',
  70.     drop: function(e,ui) {
  71.     $(ui.draggable).clone().appendTo($(this)).resizable().parent().draggable();
  72. }
  73. });
  74.   });
  75.         </script>
  76. </head>
  77. <body>
  78. <div id="content">
  79.   <div id="container">
  80.     <p> </p>
  81.     <p> </p>
  82.     <p> </p>
  83.     <p> </p>
  84.     <p> </p>
  85.     <p> </p>
  86.     <p> </p>
  87.     <p> </p>
  88.   </div>
  89.   <div id="headlist">
  90.   
  91.   <img src="images/face.jpeg" width="100" height="100" class="hairimages" />
  92.    <img src="images/face2.jpeg" width="100" height="100" class="hairimages" />
  93.   </div>
  94.   <div id="hairlist">
  95.   <img src="images/hair.png" width="100" height="100" class="hairimages" />
  96.    <img src="images/hair2.png" width="100" height="100" class="hairimages" />
  97.    <img src="images/hair3.png" width="100" height="100" class="hairimages" />
  98.     <img src="images/hair4.png" width="100" height="100" class="hairimages" />
  99.     </div>
  100.   </div>
  101. </div>    
  102. </body>
  103. </html>


當我將圖片拖曳到container這個div裡面的時候
在ie7的時候我要縮放圖片無法正常縮放,firefox正常
請問該如何解決?


复制代码
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("#rs").resizable({
  4.    handles: "all",
  5.     knobHandles: true
  6.     });
  7. });
  8. </script>

我單獨寫這樣縮放圖片的語法可以正常縮放

作者: awelkije   发布时间: 2009-08-09

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net