[JQUERY UI]請問這段語法在firefox可正常運行但在ie7就不行?
时间:2009-08-09
来源:互联网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#content {
height: 95%;
width: 95%;
position: absolute;
}
#container {
height: 98%;
width: 50%;
border: 3px solid #ccc;
float: left;
}
#headlist {
float: right;
height: 20%;
width: 48%;
border: 1px solid #ccc;
clear: none;
}
#hairlist {
height: 20%;
width: 48%;
border: 1px solid #ccc;
float: right;
margin-top: 5px;
}
#fn {
float: right;
height: 50%;
width: 48%;
margin-top: 5px;
border: 1px solid #ccc;
}
.myactive {
opacity: 0.2;
filter:alpha(opacity:20);
}
.myhover {
border: 5px solid red;
}
#headlist img {
cursor: move;
}
#hairlist img {
cursor: move;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
var $container = $('#container');
$("#face").resizable({
autoHide: true,
handles:'all',
//ghost: true,
minHeight:50,
minWidth:50,
maxHeight: 450,
maxWidth: 800
})
.parent()
.draggable({
cursor: 'move',
opacity: 0.35,
containment: '#container',
scroll: false
})
$(".hairimages").draggable({
cursor: 'move',
// revert: 'invalid',
opacity: 0.35,
helper:'clone'
})
$container.droppable({
accept: '.hairimages',
activeClass: 'myactive',
hoverClass: 'myhover',
drop: function(e,ui) {
$(ui.draggable).clone().appendTo($(this)).resizable({
autoHide: true,
handles:'all',
//ghost: true,
aspectRatio: 1/1,
minHeight:50,
minWidth:50,
maxHeight: 450,
maxWidth: 800 ,
})
.parent()
.draggable({
cursor: 'move',
containment: '#container',
scroll: false
});
}
});
});
</script>
</head>
<body>
<div id="content">
<div id="container">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="headlist">
<img src="images/face.jpeg" width="100" height="100" class="hairimages" />
<img src="images/face2.jpeg" width="100" height="100" class="hairimages" />
</div>
<div id="hairlist">
<img src="images/hair.png" width="100" height="100" class="hairimages" />
<img src="images/hair2.png" width="100" height="100" class="hairimages" />
<img src="images/hair3.png" width="100" height="100" class="hairimages" />
<img src="images/hair4.png" width="100" height="100" class="hairimages" />
</div>
<div id="fn">
</div>
</div>
</body>
</html>
請教各位前輩
請幫小弟解決一下問題
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#content {
height: 95%;
width: 95%;
position: absolute;
}
#container {
height: 98%;
width: 50%;
border: 3px solid #ccc;
float: left;
}
#headlist {
float: right;
height: 20%;
width: 48%;
border: 1px solid #ccc;
clear: none;
}
#hairlist {
height: 20%;
width: 48%;
border: 1px solid #ccc;
float: right;
margin-top: 5px;
}
#fn {
float: right;
height: 50%;
width: 48%;
margin-top: 5px;
border: 1px solid #ccc;
}
.myactive {
opacity: 0.2;
filter:alpha(opacity:20);
}
.myhover {
border: 5px solid red;
}
#headlist img {
cursor: move;
}
#hairlist img {
cursor: move;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
var $container = $('#container');
$("#face").resizable({
autoHide: true,
handles:'all',
//ghost: true,
minHeight:50,
minWidth:50,
maxHeight: 450,
maxWidth: 800
})
.parent()
.draggable({
cursor: 'move',
opacity: 0.35,
containment: '#container',
scroll: false
})
$(".hairimages").draggable({
cursor: 'move',
// revert: 'invalid',
opacity: 0.35,
helper:'clone'
})
$container.droppable({
accept: '.hairimages',
activeClass: 'myactive',
hoverClass: 'myhover',
drop: function(e,ui) {
$(ui.draggable).clone().appendTo($(this)).resizable({
autoHide: true,
handles:'all',
//ghost: true,
aspectRatio: 1/1,
minHeight:50,
minWidth:50,
maxHeight: 450,
maxWidth: 800 ,
})
.parent()
.draggable({
cursor: 'move',
containment: '#container',
scroll: false
});
}
});
});
</script>
</head>
<body>
<div id="content">
<div id="container">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="headlist">
<img src="images/face.jpeg" width="100" height="100" class="hairimages" />
<img src="images/face2.jpeg" width="100" height="100" class="hairimages" />
</div>
<div id="hairlist">
<img src="images/hair.png" width="100" height="100" class="hairimages" />
<img src="images/hair2.png" width="100" height="100" class="hairimages" />
<img src="images/hair3.png" width="100" height="100" class="hairimages" />
<img src="images/hair4.png" width="100" height="100" class="hairimages" />
</div>
<div id="fn">
</div>
</div>
</body>
</html>
請教各位前輩
請幫小弟解決一下問題
[ 此帖被awelkije在2009-08-09 20:12重新编辑 ]
作者: awelkije 发布时间: 2009-08-09
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28