许愿墙|爱墙 js代码

拖动效果可以看这里:http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html
[color=red]cloudgamer 大大写的
兼容各种浏览器的.

下边这个是初学js时做的..一时兴起发在这里,错误很多.
感谢大家的支持.抽出空再全部写一遍.所以想学习拖拽的请移驾... 呵呵[/color]
---墨墨..
------------------------------------------------------
忙活了几天..总算完了.

还有一些功能没有实现.

其中的照片使用了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

不过如果你们真的想在这个社区好好过下去,最好申请一个自己的帐号

许愿墙|爱墙 js代码相关推荐

php许愿墙模板,PHP+jQuery+Ajax漂亮的许愿墙效果
之前我们讲了PHP+MySQL+jQueryUI完美便签条http://www.sucaihuo.com/js/70.html,今天我们在此基础上做一个漂亮的许愿墙效果. 下载资源下载积分: 150 ...
php许愿墙mysql,许愿墙—许下你的愿望
从网上找了一个很漂亮的许愿墙模板,早上就花了一段时间写了这个许愿墙程序,给大家分享下. 首先我们遍历出所有的许愿列表:$query = mysql_query("select * from ...
Html+Css+js实现带有雪花飘落的许愿墙效果
目录前言导语效果预览功能要点介绍代码部分雪花逻辑部分(index.js) 逻辑文件 (script.js) 样式部分(style.css) 骨架部分(html) 效果演示总结下载地址 ...
php 许愿墙阶段案例_许愿墙代码
[php]代码库<?php define('LOVE_SERVER_VERSION', '1.0.0'); define('LOVE_SERVER_RELEASE', '20090921'); ...
HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码
HTML新年许愿墙代码,网页版春节许愿墙代码,兔年许愿墙代码完整代码下载地址:网页版春节许愿墙代码,兔年许愿墙代码运行效果核心代码 <!DOCTYPE html> <html ...
很赞的js许愿墙类似后盾网
原文:很赞的js许愿墙类似后盾网源代码下载地址:http://www.zuidaima.com/share/1770936008690688.htm biao磨叽上图图喜欢就拿走
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
许愿神器来了，30行Python打造了一款许愿墙，希望能追到女神！
公众号 "菜鸟学Python", 设为 "星标" 第447篇原创,和30w+一起学Python! 不知道大家有没有这样的想法,自己总想着能够通过许愿的方式,来祈 ...
微信小程序 | 基于云数据库的许愿墙
CSDN话题挑战赛第2期参赛话题:学习笔记本实训项目以云开发的云数据库为基础,制作一个简易的许愿墙. 01.实训内容本实训项目以云开发的云数据库为基础,制作一个简易的许愿墙,顾名思义" ...
java许愿墙_18.JavaScript实现许愿墙效果
JavaScript实现许愿墙效果: Document margin:0; } .paper { position: fixed; left: 200px; top: 200px; width: 20 ...

许愿墙|爱墙 js代码

许愿墙|爱墙 js代码相关推荐

最新文章

热门文章