<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<style type="text/css">
div{width:70%;float:left;}
p{background-color:#FFF0AC;width:100%;height:30px;font-weight:600;color:Red;}
ul{display:none;}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/jquery.ui.droppable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("p").bind("mouseenter", function () {
$("ul").css("display", "none");
var id = $(this).attr("title");
$("#" + id).css("display", "block");
});
$('li').draggable();
$('#shop').droppable({
over: function () {
$('#shop').css('background-color', 'green');
}
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="shop" style="float:right;width:300px;height:200px;background-color:#E6CAFF">
<span style="font-weight:600; font-size:large;color:Red;">购物车</span>
</div>
<div id="dfirst">
<p title="first">first</p>
<ul id="first">
<li>飞机</li>
<li>火车</li>
<li>大炮</li>
<li>火箭</li>
</ul>
</div>
<div id="dsecond">
<p title="second">second</p>
<ul id="second">
<li>保定</li>
<li>北京</li>
<li>上海</li>
</ul>
</div>
<div id="dthird">
<p title="third">third</p>
<ul id="third">
<li>大平阳</li>
<li>大西洋</li>
</ul>
</div>
<div id="dfourth">
<p title="fourth">fourth</p>
<ul id="fourth">
<li>时间碾碎记忆</li>
<li>不在思念水水</li>
</ul>
</div>
</form>
</body>
</html>
扫一扫
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
