android 仿qq空间说说
您好,是因为会员可以修改来路显示。
能够展示本人空间的任何内容
登录android版的qq,点击左边qq头像,再点击一次头像
可以看到本人的资料:账号信息、空间、照片等
点击进入qq空间,就可以和电脑的空间一样随心所欲
各位小伙伴
前端三剑客
咱们已经简单的介绍了
HTML 和 css
那么从今天开始我们就来一起认识
JavaScript
别看 JavaScript 的名字和 Java 很像,但是 JavaScript 和 Java 并没有什么关系哦~小伙伴们要记住了。
我们在开发 Javaweb 项目的之后会使用一个叫的ajax 的技术,这个技术就需要我们的 JavaScript,所以小伙伴们 JavaScript 也要学好哦~那么开始我们今天的分享~
仿QQ空间说说功能
还记得 QQ 刚出来的时候,娜娜经常和小伙伴一起发说说,互踩空间什么的。现在大家都更喜欢用微信了~QQ的话也用的很少了,你们那更喜欢用什么?
这是娜娜截取的一个空间的截图~新鲜的呦~,那么今天我们就来仿制这个QQ空间的说说发表功能。
我们先来一个页面的布局。
这些代码难度不是很大,要是有看不懂的地方 欢迎留言和我讨论哈~,现在来一起看一下我们仿制的效果~
“这是什么鬼哦?”
“说好的仿QQ空间呢?”
“跟说好的完全不一样呀~”
...
相信看到这里
小伙伴们心中
一万头草泥马神兽奔腾而过~
对此我只能说
封面仅供参考
请以实物为准
咱们继续哈~,现在只有个页面,功能什么的还没有实现呢~,我们继续实现功能哈~
第一个功能
点击头像实现头像的切换功能
这段代码的意思是:声明一个 oImg1 对象,获取 id=img1 的图片给 oImg1,然后给 oImg1 添加一个点击事件,点击图片 oImg1 时,把 oImg1 的 class 属性清空 ,oImg2 的 class 属性变为 on . oImg2 同理。
效果:
看到了吗?这两个头像在切换哦~
第二个功能
现在完善发表的功能
这个功能就有点复杂了,首先获取文本框中输入的留言、获取头像的src、获取按钮、获取liuy 区域。
我们要实现,点击发表按钮后,清空文本框中的内容,并且把文本框中的内容输出到页面上,同时点击头像,会更换头像。功能代码:
效果:
这个仿 qq 空间的说说发表功能
就完成了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="Keywords" content="关键字,关键词"> <meta name="Description" content="描述和简介"> <title>Title</title> <style type="text/css"> *{margin:0;padding:0;} body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;} a{text-decoration:none;color: inherit;} img{display: block;border:none;} ol,ul{list-style:none;} .clearfix:after {content: "";display: block;clear: both;} .fl{ float: left;} .fr{ float: right;} .main{ width: 500px; margin: 100px auto; } .main .box{ width: 500px; height: 150px; background: #ccc; border-radius: 10px; box-shadow: 0 0 10px 0 #000; padding: 10px;} .box .top textarea{ width: 100%; height: 80px; resize: none; outline: none;} .box .bottom .toux{ position: relative; width: 40px; height: 40px; padding: 2px; background: #fff; margin-top: 10px; border: 2px solid #999;} .box .bottom .toux img{ position: absolute; left: 2px; top: 2px; display: none; width: 40px; height: 40px; cursor: pointer; } .box .bottom .toux img.on{ display: block;} .box .bottom .btn{ width: 100px; height: 40px; background: orangered; margin-top: 10px; font: 20px/40px ""; color: #fff; text-align: center; border-radius: 5px; cursor: pointer; } .main ul{ margin-top: 10px; } .main .liuy li{ width: 500px; border-bottom: 2px solid #999; padding: 10px; } .main .liuy li img{ width: 40px; height: 40px; padding: 2px; border: 2px solid #999; cursor: pointer; } </style></head><body> <div class="main"> <div class="box"> <div class="top"> <form action=""> <textarea name="" id="oarea" cols="30" rows="10"></textarea> </form> </div> <div class="bottom"> <div class="toux fl"> <img src="img/1.jpg" alt="" id="img1" class="on"> <img src="img/2.jpg" alt="" id="img2"> </div> <div class="btn fr" id="btn">发表</div> </div> </div> <ul class="liuy" id="liuy"> </ul> </div> <script> var oImg1 = document.getElementById("img1"); //获取头像的第一张图片 var oImg2 = document.getElementById("img2");//获取头像的第二张图片 var oArea = document.getElementById("oarea"); //获取文本域 var oImg = oImg1.src;//获取图片的src var oBtn = document.getElementById("btn");//获取发表按钮 var oLiuy = document.getElementById("liuy");//获取ul //点击第一个头像 oImg1.onclick = function () { this.className = ""; oImg2.className = "on"; oImg = oImg2.src; }; //点击第二个头像 oImg2.onclick = function () { this.className = ""; oImg1.className = "on"; oImg = oImg1.src; }; //点击发表的时候 oBtn.onclick = function () { var value = oArea.value; //获取文本域里面输入的内容 if(value){ oLiuy.innerHTML += "<li class="clearfix"><img src=""+oImg+""" + "class="fl-l"><p class="fl-l">"+value+"</p></li>"; oArea.value = ""; }else{ alert("不允许发表空的留言"); } } </script></body></html>
封面仅供参考
请以实物为准
小伙伴们再见了
不会 说可以显示都是骗人的 苹果有苹果的系统 模仿不了的 装装样子罢了
listview或者你说的 都可以是实现 更多追问追答 追问 感觉好多不懂的。。。。现在又非常想实现这个。。 追答 那就一点一点的摸索吧 先看看这两个控件怎么用吧 追问 嗯了,谢谢了
那个应该是UI设计吧,其实微博贴吧也是那样的设计