浏览 10253 次
|
锁定老帖子 主题：许愿墙|爱墙 js代码
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-27
最后修改：2010-02-03
拖动效果可以看这里:http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html
cloudgamer 大大写的 兼容各种浏览器的. 下边这个是初学js时做的..一时兴起发在这里,错误很多. 感谢大家的支持.抽出空再全部写一遍.所以想学习拖拽的请移驾... 呵呵 ---墨墨.. ------------------------------------------------------ 忙活了几天..总算完了. 还有一些功能没有实现. 其中的照片使用了QQ爱墙里的图片. 给大家分享一下..css样式没有写出来. 都在提供的文档里. 下载地址在文章底部 其中的push.html是一个作废的网页. 其中字体大小没有设置..所以不是很美观.. html代码 <html> <head> <!--标题--> <title>爱墙啊~你真凉~首页</title> <!--插入css样式--> <link rel="stylesheet" href="css/love.css" type="text/css"></head> <!--插入js脚本--> <script src="js/love.js"></script> </head> <body background="img/bg.jpg"> <!--导航栏--> <div class="titler"><a href="javascript:location.reload()">首页</a> <a href="javascript:writepaper()">写纸条</a></div> <!--填写--> <div id="writepp" class="paper" style="display:none" > <form name="f1"> <table> <tr> <td>收信人:</td> <td><input type="text" id="revename" maxlength="14"></td> </tr> <tr> <td>内 容:</td> <td><textarea cols="19" rows="5" id="loveletter"></textarea></td> </tr> <tr> <td>写信人:</td> <td><input type="text" id="sendname" maxlength="14"></td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="提交" onClick="addlove()"></td> </tr> </table> </form> </div> <!--初始化的一个爱意--> <div class="pinkWall" style="left: 366px;top: 218px;" onMouseDown="begin(this)" id="1" > <div class="recipient">亲爱的:</div> <div class="lookc"><img src="img/look.gif" alt="查看" onClick="looklook()" /> <img src="img/close.gif" alt="关闭" onClick="hiddenp(1)" /></div> <div class="introduce"> 我对不起你...我好喜欢你..我不会再不耐烦你了..不要不理我..好不好..<br /></div> <div class="sender">破张棋</div> <div class="senddate">2009-03-23</div> </div> </div> </body> </html> js代码 var i=2;
/*拖拽*/
function begin(drag){
var x=event.clientX-parseInt(drag.style.left);
var y=event.clientY-parseInt(drag.style.top);
document.attachEvent("onmousemove",move);
document.attachEvent("onmouseup",getup)
function move(e){
drag.style.left=(event.clientX-x)+"px";
drag.style.top=(event.clientY-y)+"px";
}
function getup(e){
document.detachEvent("onmouseup",getup);
document.detachEvent("onmousemove",move);
}
}
/*查看字条*/
function looklook(){
alert("我就不让你看..嘿嘿.");
}
/*隐藏字条*/
function hiddenp(id){
document.getElementById(id).style.display="none";
}
/*写字条*/
function writepaper(){
wr=document.getElementById("writepp");
if(wr.style.display=="none")
{
wr.style.display="block";
}
else
{
wr.style.display="none";
}
}
/*增加字条*/
function addlove(){
//添加一个div
var oDiv = document.createElement("DIV");
//将div添加到页面里
document.body.appendChild(oDiv);
var num=Math.round(Math.random()*100+Math.random()*100);
oDiv.id = i;
oDiv.style.top = 200+num;
oDiv.style.left = 200+num;
oDiv.style.width = 209;
oDiv.style.height = 181;
oDiv.style.background = 'url(img/o1.gif)';
oDiv.style.visibility = 'visible';
//得到时间
var now= new Date( );
var da=now.getYear()+"-"+(now.getMonth( )+1)+"-"+now.getDate();
divdata="<div class='recipient'>"+document.getElementById("revename").value+"</div>"+"<div class='lookc'>"+"<img src='img/look.gif' alt='查看' onClick='looklook()' /> "+"<img src='img/close.gif' id='hidd"+i+"' alt='关闭'/ >"+"</div>"+"<div class='introduce'> "+document.f1.loveletter.value+"</div>"+"<div class='sender'>"+document.getElementById("sendname").value+"</div>"+"<div class='senddate'>"+da+"</div>";
oDiv.innerHTML=divdata;
//俩个参数,第一个你要设置的属性名称,第二个参数是要设置的值.
oDiv.setAttribute("onmousedown",function(){begin(oDiv)});
var j = i+"";
//给关闭图片添加事件
document.getElementById("hidd"+i).onclick=function (){hiddenp(j)};
i++;
}
需要注意的一点,我郁闷良久才搞明白的地方. divdata="<div class='recipient'>"+document.getElementById("revename").value+"</div>"+"<div class='lookc'>"+"<img src='img/look.gif' alt='查看' onClick='looklook()' /> "+"<img src='img/close.gif' id='hidd"+i+"' alt='关闭'/ >"+"</div>"+"<div class='introduce'> "+document.f1.loveletter.value+"</div>"+"<div class='sender'>"+document.getElementById("sendname").value+"</div>"+"<div class='senddate'>"+da+"</div>";
这里用拼字符串的方法添加层添加代码的时候.一个标签就用一个""号括起来,若是一个""内标签过多会报异常...恩...应该是这样.. PS:因为没有帐号下载,又懒得申请帐号的同志们! 给你们申请了一个帐号.帐号是为了下载的全拼,密码是123456789 帐号:weilexiazai 密码:123546789 不过如果你们真的想在这个社区好好过下去,最好申请一个自己的帐号 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-02-28
學習下載看看。。
|
| 返回顶楼 | |
|
发表时间：2009-02-28
其实 里边的难点在于 动态添加div层,并且让添加的div层有拖动的效果
|
| 返回顶楼 | |
|
发表时间：2009-03-01
yunmoxue 写道 其实 里边的难点在于 动态添加div层,并且让添加的div层有拖动的效果
恩，对啊 |
| 返回顶楼 | |
|
发表时间：2009-03-03
yexin218 写道 yunmoxue 写道 其实 里边的难点在于 动态添加div层,并且让添加的div层有拖动的效果
恩，对啊 这位朋友,给div 动态添加事件 请参照 http://www.iteye.com/topic/340819 |
| 返回顶楼 | |
|
发表时间：2009-03-19
自个下载。
|
| 返回顶楼 | |
|
发表时间：2010-02-02
在ff 和 chrome有问题。不能拖动啊。
|
| 返回顶楼 | |
|
发表时间：2010-02-03
大哥，只支持IE请标明不支持多浏览器。
提两个小小的建议： 第一提交以后输入框是不是关掉比较好，又没有关闭按钮，每次要点写纸条关掉很奇怪。 第二当内容过多时，是否可以截取成缩略文档，不然就会看到下面的搞笑场面。 
不过还是很佩服你这种不用框架，基于原型的精神。 
|
| 返回顶楼 | |
|
发表时间：2010-02-03
最后修改：2010-02-03
s海若 写道 大哥，只支持IE请标明不支持多浏览器。
提两个小小的建议： 第一提交以后输入框是不是关掉比较好，又没有关闭按钮，每次要点写纸条关掉很奇怪。 第二当内容过多时，是否可以截取成缩略文档，不然就会看到下面的搞笑场面。
不过还是很佩服你这种不用框架，基于原型的精神。
恩第二个问题我也知道 ,可以js判断动态换行,好像也可以通过css控制..同学做过. 不用框架的原因是...我当时根本不知道有框架..- - ... 拖拽的话.看看 这个,,正在学习这位大哥的代码.. http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html |
| 返回顶楼 | |
