效果类似这样↑。。
滚动的。。下面框里里可以直接发表,当然,需要登陆后发表。
模板HTML代码:
- <!--{eval $nm=0;$doing_s=array();$query=DB::query("SELECT doid,uid,username,message,dateline FROM ".DB::table('home_doing')." ORDER BY doid desc limit 10");while($item=DB::fetch($query))$doing_s[]=$item;}-->
- <div class="mydoing_box">
- <ul id="sliderlck">
- <!--{loop $doing_s $temp}-->
- <!--{eval $nm++;}-->
- <li class="cl<!--{if $nm%2==0}--> hui<!--{/if}-->">
- <div class="mydoing_left_face cl">
- <a href="home.php?mod=space&uid={$temp[uid]}" target="_blank">{avatar($temp[uid],small)}</a>
- </div>
- <div class="mydoing_right_box">
- <p class="mydoing_right_box_message"><a href="home.php?mod=space&uid={$temp[uid]}&do=doing&doid={$temp[doid]}" target="_blank">{$temp[message]}</a></p>
- <p class="mydoing_author_time"><span><a href="home.php?mod=space&uid={$temp[uid]}" target="_blank">{$temp[username]}</a> {echo dgmdate($temp[dateline],'u')}</span></p>
- </div>
- </li>
- <!--{/loop}-->
- </ul>
- </div>
- <div class="mydoing_post_box cl">
- <!--{if $_G['uid']}-->
- <form method="post" id="doingform" action="home.php?mod=spacecp&ac=doing&handlekey=doing&inajax=1" onsubmit="if($('content_nm').value=='和大家分享您此时的心情吧...' || $('content_nm').value==''){showPrompt(null, null,'请输入你的心情!', 2000);return false;}else{ajaxpost('doingform', 'mood_mystatus');return false;}">
- <input type="hidden" name="addsubmit" value="true">
- <input type="hidden" name="spacenote" value="true">
- <input type="hidden" name="formhash" value="{FORMHASH}">
- <TEXTAREA id="content_nm" name="message" onclick="showFace(this.id, this.id);" onfocus="if(this.value=='和大家分享您此时的心情吧...'){this.value='';}" class="mydoing_area">和大家分享您此时的心情吧...</textarea>
- <input value="发射!" id="submitbtn" type="submit" class="mydoing_post_fabiao"/>
- <span class="mydoing_post_tis">请文明发表, 谢谢!</span>
- </form>
- <div id="mood_mystatus" class="mtm mbn" style='display:none;'></div>
- <!--{else}-->
- <textarea class="mydoing_area">和大家分享您此时的心情吧...</textarea>
- <input type="button" class="mydoing_post_fabiao" value="" onclick="showWindow('login', 'member.php?mod=logging&action=login&guestmessage=yes')"/>
- <span class="mydoing_post_tis">您尚未登录!<a href="javascript:;" onclick="showWindow('login', 'member.php?mod=logging&action=login&guestmessage=yes')">登录</a></span>
- <!--{/if}-->
- </div>
复制代码 JS代码(jQuery,原本是$,因冲突改为jQuery):
- <script type="text/javascript">
- var mydoing_addvar="";
- function succeedhandle_doing(url, msg, values) {
- if(msg) {
- showPrompt(null, null,msg, 2000);
- }
- if(values['message']) {
- showDialog(values['message']);
- return false;
- }
- var x = new Ajax();
- x.get('home.php?mod=spacecp&ac=doing&op=spacenote&inajax=1', function(s){
- jQuery("#sliderlck").append('<li class="bai"><div class="mydoing_left_face"><a href="home.php?mod=space&uid=$_G[uid]" target="_blank">{avatar($_G[uid],small)}</a></div><div class="mydoing_right_box"><p class="mydoing_right_box_message"><a href="home.php?mod=space&uid=$_G[uid]&do=doing&view=me" target="_blank">'+s+'</a></p><p class="mydoing_author_time"><span><a href="home.php?mod=space&uid=$_G[uid]" target="_blank">{$temp[username]}</a> 刚刚说</span></p></div></li>');
- jQuery('content_nm').value="分享你的心情…";
- });
- }
- </script>
- <script type="text/javascript">
- jQuery(function(){
- if(jQuery('sliderlck')){
- setInterval(function() {
- jQuery("#sliderlck").css("top",-(jQuery("#sliderlck li:last").height()+1));
- if(jQuery("#sliderlck li:first").hasClass("hui")){
- jQuery("#sliderlck li:last").removeClass("hui");
- }else{
- jQuery("#sliderlck li:last").addClass("hui");
- }
- jQuery("#sliderlck").prepend(jQuery("#sliderlck li:last").clone().css("opacity",0));
- jQuery("#sliderlck li:last").remove();
- jQuery("#sliderlck").animate({"top":"0px"},1000,0,function(){
- jQuery("#sliderlck li:first").animate({"opacity":"1"});
- });
- },5000);
- }
- });
- </script>
复制代码 附上部分的css:
- <style>
- .mydoing_box{height:360px;overflow: hidden;}
- .mydoing_box ul li{padding:10px;height:40px;overflow: hidden;}
- .mydoing_left_face{float:left;margin-right: 15px;display: inline-block;}
- .mydoing_left_face img{display: block;border: 1px solid #ccc;padding: 3px;border-radius: 50%;height: 32px;width: 32px;}
- .mydoing_right_box{display: inline-block;width: 230px;}
- .mydoing_right_box_message{display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
- .mydoing_author_time{text-align:right;font-size:12px;color:#bbb;}
- .mydoing_author_time a{font-size:12px;color:#bbb;}
- .hui{background:#f8f8f8;}
- .mydoing_post_box{padding: 10px;background: #f8f8f8;}
- .mydoing_post_box textarea{width:275px;border: 1px solid #ddd;border-radius: 3px;padding:5px;}
- .mydoing_post_fabiao{margin: 10px 0;padding: 0 10px;float: left;border: 1px solid #ddd;font-size: 12px;}
- .mydoing_post_tis{float: right;margin: 10px 0;}
- </style>
复制代码 OK,从我模板里复制出来的,应该没什么问题。
|