Sina Weibo release page code
Sina Weibo release page code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> ? ??
<meta name="apple-mobile-web-app-capable" content="yes" /> ? ?
<meta name="format-detection" content="telephone=no" /> ? ?
<title>jQuery新浪微博發(fā)布頁(yè)面代碼 </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar ?navbar-fixed-top" role="navigation" style="background: #e0620d ;padding-top: 3px;height:50px;">
<div class="container-fluid" style="background: #fff;">?
<div class="navbar-header ">
<span class="navbar-brand " href="#">WEIBO</span>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#my-navbar-collapse">
<span class="sr-only">切換導(dǎo)航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="#熱門(mén)話(huà)題#">
<i class="glyphicon glyphicon-search btn_search" ></i>
? <!-- ?<button type="submit" class="btn btn-default">提交</button> -->
</div>
</form>
?<div class="collapse navbar-collapse" id="my-navbar-collapse">
??
<ul class="nav navbar-nav navbar-right" >
<li ><a href="#"><i class="glyphicon glyphicon-user"></i> Jack.C</a></li>
?
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
設(shè)置 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">登錄</a></li>
<li><a href="#">注冊(cè)</a></li>
? ?
</ul>
</li>
</ul>
?</div>
?
</div>
?<hr style="margin: 0;padding: 0;color:#222;width: 100%">
</nav>
<div class="container container_bg" >
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-6 col-xs-12 my_edit" >
<div class="row" id="edit_form" >
<span class="pull-left" style="margin:15px;">編寫(xiě)新鮮事</span>
<span class="tips pull-right" style="margin:15px;"></span>
<form role="form" style="margin-top: 50px;">
?<div class="form-group">
? <div class="col-sm-12">
<div contentEditable="true" id="content" class="form-control " ></div> ?
</div>
<div class="col-sm-12" style="margin-top: 12px;">
<span class="emoji" >表情</span>
<span class="pic" >圖片 </span>
<span>
<input type="file" name="" ?class="select_Img" style="display: none" >
<img class="preview" src="">
</span>
<div class="myEmoji" >
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#set" data-toggle="tab">
? 預(yù)設(shè)
</a>
</li>
<li><a href="#hot" data-toggle="tab">熱門(mén)</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="set">
<div class="emoji_1"></div>
</div>
<div class="tab-pane fade" id="hot">
?<div class="emoji_2"></div>
</div>
??
</div>
</div>
<!-- <span> <input type="file" id="selectImg" value=""></input> </span> -->
<button type="button" id="send" class="btn btn-default pull-right disabled">發(fā)布</button>
</div>
?</div>
</form>?
</div>
<div class="row item_msg" >
<div class="col-sm-12 col-xs-12 message" >
<img src="img/icon.png" class="col-sm-2 col-xs-2" style="border-radius: 50%">
<div class="col-sm-10 col-xs-10">
<span style="font-weight: bold;">Jack.C</span>
<br>
<small class="date" style="color:#999">1分鐘前</small>
<div class="msg_content">happy day!
<img class="mypic" src="img/bg_1.jpg" >
</div>
</div>
?
</div>
??
</div>
</div>
<div class="col-sm-3 col-xs-12 part_right" >
<div class="row text-center inform">
<img src="img/icon.png" >
<h4 style="font-weight: bold;">Jack.C</h4>
<div class="col-sm-12 my_inform" >
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">關(guān)注</div>
</div>
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">粉絲</div>
</div>
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">博客</div>
</div>
</div>
</div> ?
<div class="row part_hot" >
<div class="col-sm-12">
<span class="pull-left" style="padding: 10px;font-size:16px;font-weight: bold;">熱門(mén)話(huà)題</span>
<span class="pull-right" style="padding: 10px;">換話(huà)題</span>
</div>
<hr style="margin: 0;padding: 0;width: 100%">
<div class="col-sm-12 item_hot" >
<span class="pull-left">#英雄聯(lián)盟s7#</span>
<span class="pull-right item_num">34.6億</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#今天霜降#</span>
<span class="pull-right item_num">2.6億</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#亞洲新歌榜#</span>
<span class="pull-right item_num">10.4億</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#撲通撲通少女心#</span>
<span class="pull-right item_num">1.5億</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#突然開(kāi)心#</span>
<span class="pull-right item_num">1.1億</span>
</div>
<hr style="margin: 0;padding: 0;width: 100%">
<div class="col-sm-12 text-center" style="padding: 10px"><a href="#">查看更多</a></div>
</div>
??
</div>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#content").keyup(function(){
//Determine the length of the input string
var content_len = $("#content").text().replace(/\s/g,"").length;
$(".tips").text("Already entered" content_len "words");
if(content_len==0){
// alert(content);
$(".tips").text("");
$("#send").addClass("disabled");
return false;
}else{
$("#send").removeClass("disabled");
}
});
$(".pic").click(function(){
$(".select_Img").click();
})
// function confirm(){
// var r= new FileReader();
// f=$(".select_Img").files[0];
// r.readAsDataURL(f);
// r.onload=function(e) {
// $(".preview").src=this.result;
// };
// }
//Click the button to send content
$("#send").click(function(){
// var myDate = new Date();
// var min = myDate.getMinutes();
// var time = min-(min-1);
// //alert(time);
var content=$("#content").html();
//Determine whether the selected image format is
var imgPath = $(".imgPath").text();
var start = imgPath.lastIndexOf(".");
var postfix = imgPath.substring(start,imgPath.length).toUpperCase();
if(imgPath!=""){
if(postfix!=".PNG"&&postfix!=".JPG"&&postfix!=".GIF"&&postfix!=".JPEG"){
alert("The picture format must be png, gif, jpeg, jpg format");
}else{
$(".item_msg").append("<div class='col-sm-12 col-xs-12 message' > <img src='img/icon.png' class='col-sm- 2 col-xs-2' style='border-radius: 50%'><div class='col-sm-10 col-xs-10'><span style='font-weight: bold; ''>Jack.C</span> <br><small class='date' style='color:#999'>Just now</small><div class='msg_content'>" content "<img class='mypic' onerror='this.src='img/bg_1.jpg' src='file:///" imgPath "' ></div></div>< /div>");
}
}else{
$(".item_msg").append("<div class='col-sm-12 col-xs-12 message' > <img src='img/icon.png' class='col-sm- 2 col-xs-2' style='border-radius: 50%'><div class='col-sm-10 col-xs-10'><span style='font-weight: bold; ''>Jack.C</span> <br><small class='date' style='color:#999'>Just now</small><div class='msg_content'>" content "</div></div></div>");
}
});
//Add emoticon package 1
for (var i = 1; i < 60; i ) {
$(".emoji_1").append("<img src='img/f" i ".png' style='width:35px;height:35px' >");
}
//Add emoticon package 2
for (var i = 1; i < 61; i ) {
$(".emoji_2").append("<img src='img/h" i ".png' style='width:35px;height:35px' >");
}
$(".emoji").click(function(){
$(".myEmoji").show();
//Click on a blank space to hide the popup layer
$(document).click(function (e) {
if (!$("#edit_form").is(e.target) && $("#edit_form").has(e.target).length === 0) {
$(".myEmoji").hide();
}
});
});
//Add emoticons to the input box
$(".myEmoji img").each(function(){
$(this).click(function(){
var url = $(this)[0].src;
$('#content').append("<img src='" url "' style='width:25px;height:25px' >");
$("#send").removeClass("disabled");
})
})
//Zoom in or out preview image
$(".mypic").click(function(){
var oWidth=$(this).width(); //Get the actual width of the image
var oHeight=$(this).height(); //Get the actual height of the picture
if($(this).height()!=200){
$(this).height(200);
}else{
$(this).height(oHeight 200/oWidth*oHeight);
}
})
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
This is a release page code for Sina Weibo. Friends who need it can download it directly. More special effect codes can be found on the PHP Chinese website.
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
How to Access Object Properties with Special Characters in JavaScript?
01 Jan 2025
Accessing Object Properties with Special CharactersAccessing object properties with special characters, such as periods or other...
Csgo special effects blockbuster movies HD viewing entrance to watch Csgo high-definition special effects blockbuster movies directly
04 Jun 2025
CSGO (Counter-Strike: Global Offensive) is a first-person shooter that is loved by players around the world. Its exciting competitions and high-quality special effects videos have always been topics to talk about by players. Whether it is the thrilling professional leagues or the friendly match between ordinary players, it can show amazing special effects and strategies in the game. This article will introduce you in detail how to find and watch CSGO special effects blockbusters in detail to ensure that you can experience the best visual enjoyment.
What are Douyin's own AI tools?
29 Nov 2024
Douyin provides many of its own AI tools to help creators easily create, edit and promote content, including: intelligent editing, video special effects, subtitle generation, cover generation and other auxiliary content creation. Intelligent recommendations, content review and creation assistance tools improve content quality and dissemination efficiency. Voice changers and more add interest to the content.
10 jQuery Cool Menu Effect Plugins
01 Mar 2025
10 cool jQuery menu special effects plug-ins to improve website user experience! We have shared many jQuery navigation menu plugins, and now we bring you 10 more amazing jQuery menu effects plugins. Enjoy it! Related readings: - 10 dazzling jQuery navigation menus - 15 excellent jQuery navigation menus Right-click menu This plugin is very easy to use and compact, allowing you to create right-click menus. Source Code Demo 2. jQuery Multi-level Menu – FX CSS Menu with Submenu 100% CSS menu, visual effects provided by jQuery. Only use Javascript to implement special effects. Fully compatible with cross-browser, package
How to make Windows 11 faster?
28 Jun 2025
1. Disable unnecessary startup items: Turn off network disks, input method additional functions and other power-on startup programs through the task manager; 2. Clean disk space: Use the "Disk Cleanup" tool and enable "Storage Awareness" to automatically clean up junk files; 3. Adjust visual effects: cancel unnecessary special effects in "Performance Options" or select "Best Performance"; 4. Update drivers, close search indexes, and check hard disk status to optimize background services and hardware performance. These methods can effectively improve the smoothness of Windows 11.
Blue Prince: All Items & What They do
12 Apr 2025
There are two types of items in Blue Prince: Common and Special. Common items are easier to find and usually tied to specific room types. Special items are rarer, but they offer powerful effects or let you reach areas you couldn’t access otherwise.Co
05 Apr 2025
CSS style problem: Implement white edges in text and add shadow effects. In CSS style design, special processing of text is often required, such as adding white edges...
How Do You Create Constructors in JavaScript Objects?
05 Nov 2024
Constructors in JavaScript ObjectsJavaScript objects can have constructors. Unlike other programming languages, JavaScript does not use a special...
Steps to create videos in deepseek - How to create videos in deepseek
12 Mar 2025
Master DeepSeek video creation skills and easily make wonderful videos! This article will gradually guide you through the entire process of DeepSeek video production, from importing materials to final export, allowing you to get started quickly. Preparation Please make sure that DeepSeek software is installed and familiar with its basic operating interface. Material Import Launch DeepSeek, click the "Import" option under the "File" menu to add your video, audio and image materials. Video editing drags the material to the timeline, uses the editing tool to crop, adjust clips, and adds transition effects to make the video connection smooth and natural. Special effects and subtitles Add visual effects to videos using DeepSeek built-in special effects library and add subtitles to enhance the expression of video content.
Hot Tools
jQuery+Html5 realizes beautiful confession animation code
jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!
Couple's romantic confession js special effects code
JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!
Simple js love confession artifact
Simple native js love confession artifact
Bunker's html5 particle animation expressive effects
Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.
jQuery responsive background login interface template
jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!