许愿墙|爱墙 js代码

yunmoxue

浏览: 285002 次
性别:
来自: 郑州

最近访客更多访客>>

daizikang

PollyYeung

xuhuanfeng

bluecoyote

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

IE CSS 框架 Chrome 浏览器

拖动效果可以看这里: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>&nbsp;<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()" />&nbsp;<img src="img/close.gif" alt="关闭" onClick="hiddenp(1)" /></div>
<div class="introduce">&nbsp;&nbsp;&nbsp;&nbsp;我对不起你...我好喜欢你..我不会再不耐烦你了..不要不理我..好不好..<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()' />&nbsp;"+"<img src='img/close.gif' id='hidd"+i+"' alt='关闭'/ >"+"</div>"+"<div class='introduce'>&nbsp;&nbsp;&nbsp;&nbsp;"+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()' />&nbsp;"+"<img src='img/close.gif' id='hidd"+i+"' alt='关闭'/ >"+"</div>"+"<div class='introduce'>&nbsp;&nbsp;&nbsp;&nbsp;"+document.f1.loveletter.value+"</div>"+"<div class='sender'>"+document.getElementById("sendname").value+"</div>"+"<div class='senddate'>"+da+"</div>";

这里用拼字符串的方法添加层添加代码的时候.一个标签就用一个""号括起来,若是一个""内标签过多会报异常...恩...应该是这样..

PS:因为没有帐号下载,又懒得申请帐号的同志们!
给你们申请了一个帐号.帐号是为了下载的全拼,密码是123456789

帐号:weilexiazai
密码:123546789

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

project.rar (511.4 KB)
下载次数: 1285

分享到：

js添加div | <宋词>陆游,秦观

2009-02-27 12:09
浏览 3495
评论(8)
论坛回复 / 浏览 (8 / 10225)
分类:Web前端
查看更多

8 楼 yunmoxue 2010-02-03

s海若写道

大哥，只支持IE请标明不支持多浏览器。
提两个小小的建议：
第一提交以后输入框是不是关掉比较好，又没有关闭按钮，每次要点写纸条关掉很奇怪。
第二当内容过多时，是否可以截取成缩略文档，不然就会看到下面的搞笑场面。

不过还是很佩服你这种不用框架，基于原型的精神。

恩第二个问题我也知道 ,可以js判断动态换行,好像也可以通过css控制..同学做过.
不用框架的原因是...我当时根本不知道有框架..- - ...
拖拽的话.看看这个,,正在学习这位大哥的代码..
http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html

7 楼 s海若 2010-02-03

不过还是很佩服你这种不用框架，基于原型的精神。

6 楼 crazymud 2010-02-02

在ff 和 chrome有问题。不能拖动啊。

5 楼 yunmoxue 2009-03-19

自个下载。

4 楼 yunmoxue 2009-03-03

yexin218 写道

yunmoxue 写道

其实里边的难点在于动态添加div层,并且让添加的div层有拖动的效果

恩，对啊

这位朋友,给div 动态添加事件请参照
http://www.iteye.com/topic/340819

3 楼 yexin218 2009-03-01

yunmoxue 写道

其实里边的难点在于动态添加div层,并且让添加的div层有拖动的效果

恩，对啊

2 楼 yunmoxue 2009-02-28

其实里边的难点在于动态添加div层,并且让添加的div层有拖动的效果

1 楼 IamNull 2009-02-28

學習下載看看。。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论