诚恳求教 求一个相当于www.neng.com的源码,谢谢,分不够再加 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 抛砖引玉 :主体框架就不说了 ,就说下面的显示区域,可以根据需求划分成相应的div,排列起来就可以了 。用这种方法实现起来没难度 。静待高手~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <style type="text/css"> div.box{ position:relative; padding:5px; background-color:#000; width:300px; height:300px; overflow:hidden; } div.box div.item{ float:left; width:90px; height:90px; background-color:#ccc; margin:5px; position:relative; cursor:pointer; } div.mask{ width:90px; height:90px; background-color:#f00; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); position:absolute; visibility:hidden; top:20px; left:20px; z-index:10; } </style> <script type="text/javascript"> var darg = { target : null, ox : 0, oy : 0 }; var box = document.createElement("div"); box.className = "box"; var mask = document.createElement("div"); mask.className = "mask"; box.appendChild(mask); for(var i = 0; i < 9; i ++){ var item = document.createElement("div"); item.className = "item"; item.appendChild(document.createTextNode(i + 1)); item.onmousedown = function(){ var e = arguments[0] || window.event; var o = e.target || e.srcElement; darg.target = o; mask.style["top"] = o.offsetTop + "px"; mask.style["left"] = o.offsetLeft + "px"; mask.style["visibility"] = "visible"; darg.ox = e.clientX - mask.offsetLeft; darg.oy = e.clientY - mask.offsetTop; } box.appendChild(item); } document.body.appendChild(box); function getItem(x,y){ x = x - box.offsetLeft; y = y - box.offsetTop; var o = box.childNodes[(3 - parseInt((box.offsetWidth - x)/100) + (2 - parseInt((box.offsetHeight - y)/100)) * 3)]; var n = darg.target.nextSibling; var on = o.nextSibling; box.insertBefore(o,n); box.insertBefore(darg.target,on); } document.onmousemove = function(){ if(darg.target != null && darg.target.nodeType == 1){ var e = arguments[0] || window.event; mask.style["left"] = e.clientX - darg.ox + "px"; mask.style["top"] = e.clientY - darg.oy + "px"; } } box.onmouseup = function(){ if(darg.target != null && darg.target.nodeType == 1){ var e = arguments[0] || window.event; var o = e.target || e.srcElement; getItem(e.clientX,e.clientY); darg.target = null; } } document.onmouseup = function(){ darg.target = null; mask.style["visibility"] = "hidden"; } </script> </body> </html> 这个应该适合你楼主 程序看着不难啊,不知道你哪块不明白。站点的效果只是加了一个遮罩层。至于添加就看你是想要什么样的用户体验采用AJAX还是传统取用了。有什么问题的话可以留消息给我,我不定时上CSDN的 ext 两个grid之间的拖动出现问题? 这是什么语法错误~~~~~ jQuery 求和 求 一实现动态加载的树形菜单 控件 javascript的document问题 请教字符串替换方式页面多语言的js实现方法 怎样在asp.net控件的事件中使用javascript方法 一个比较难解决的问题 docment.write一个层,如何显示 我要在页面中实现全屏幕,怎么实现?看看我的源代码。 cookies覆盖写入的问题 qTip 图片显示
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<style type="text/css">
div.box{
position:relative;
padding:5px;
background-color:#000;
width:300px;
height:300px;
overflow:hidden;
}
div.box div.item{
float:left;
width:90px;
height:90px;
background-color:#ccc;
margin:5px;
position:relative;
cursor:pointer;
}
div.mask{
width:90px;
height:90px;
background-color:#f00;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
position:absolute;
visibility:hidden;
top:20px;
left:20px;
z-index:10;
}
</style>
<script type="text/javascript">
var darg = {
target : null,
ox : 0,
oy : 0
};
var box = document.createElement("div");
box.className = "box";
var mask = document.createElement("div");
mask.className = "mask";
box.appendChild(mask);
for(var i = 0; i < 9; i ++){
var item = document.createElement("div");
item.className = "item";
item.appendChild(document.createTextNode(i + 1));
item.onmousedown = function(){
var e = arguments[0] || window.event;
var o = e.target || e.srcElement;
darg.target = o;
mask.style["top"] = o.offsetTop + "px";
mask.style["left"] = o.offsetLeft + "px";
mask.style["visibility"] = "visible";
darg.ox = e.clientX - mask.offsetLeft;
darg.oy = e.clientY - mask.offsetTop;
}
box.appendChild(item);
}
document.body.appendChild(box);
function getItem(x,y){
x = x - box.offsetLeft;
y = y - box.offsetTop;
var o = box.childNodes[(3 - parseInt((box.offsetWidth - x)/100) + (2 - parseInt((box.offsetHeight - y)/100)) * 3)];
var n = darg.target.nextSibling;
var on = o.nextSibling;
box.insertBefore(o,n);
box.insertBefore(darg.target,on);
}
document.onmousemove = function(){
if(darg.target != null && darg.target.nodeType == 1){
var e = arguments[0] || window.event;
mask.style["left"] = e.clientX - darg.ox + "px";
mask.style["top"] = e.clientY - darg.oy + "px";
}
}
box.onmouseup = function(){
if(darg.target != null && darg.target.nodeType == 1){
var e = arguments[0] || window.event;
var o = e.target || e.srcElement;
getItem(e.clientX,e.clientY);
darg.target = null;
}
} document.onmouseup = function(){
darg.target = null;
mask.style["visibility"] = "hidden";
}
</script>
</body>
</html>
这个应该适合你楼主
站点的效果只是加了一个遮罩层。
至于添加就看你是想要什么样的用户体验采用AJAX还是传统取用了。
有什么问题的话可以留消息给我,我不定时上CSDN的