Jquery绘制气泡墙
上次写了一个Raphael.js绘制气泡墙的代码；发现这东西在低端手机上略卡；毕竟它也是用了Jquery的动画效果；所以今天我用Jquery直接实现它；
个人感觉代码很烂；因为没整理。
用到的pagesize.640.js如下：
用到的CSS如下:
个人感觉代码很烂；因为没整理。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="inital-scale=1.0" />
<title>叹嘻之墙</title>
<link rel="stylesheet" type="text/css" href="css/bubble.css" />
<script type="text/javascript" src="js/pagesize.640.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var dataJson = [{"address":"上海","content":"OOXX","contentType":"self","create_date":"2014-09-15T14:28:47+08:00","id":"8ad681f24877fd7a014877fd9f370009","ip":"10.86.1.114"},{"content":"原有数据0X0"},{"content":"原有数据1X0"},{"content":"原有数据2X0"},{"content":"原有数据3X0"},{"content":"原有数据4X0"},{"content":"原有数据5X0"},{"content":"原有数据6X0"},{"content":"原有数据7X0"},{"content":"原有数据8X0"},{"content":"原有数据9X0"},{"content":"原有数据10X0"},{"content":"原有数据11X0"},{"content":"原有数据12X0"},{"content":"原有数据13X0"},{"content":"原有数据14X0"},{"content":"原有数据15X0"},{"content":"原有数据16X0"},{"content":"原有数据17X0"},{"content":"原有数据18X0"},{"content":"原有数据19X0"},{"content":"原有数据20X0"},{"content":"原有数据21X0"},{"content":"原有数据22X0"},{"content":"原有数据23X0"},{"content":"原有数据24X0"},{"content":"原有数据25X0"},{"content":"原有数据26X0"},{"content":"原有数据27X0"},{"content":"原有数据28X0"},{"content":"原有数据29X0"}];
function getText(content)
{
var length = content.length;
var content_array = content.split("");
var content_info = "";
for(var i = 0;i<6;i++)
{
if(content_array[i]!=null)
{
content_info += content_array[i];
}
}
//超出6个字加省略号
if(length>6)
{
return content_info+".";
}
else
{
return content_info;
}
}
$(function()
{
var htmlStr = "";
for(var i = 0 ;i<dataJson.length;i++)
{
htmlStr += "<div id=div"+i+" class = 'div_style' style= left:"+getLeft()+"px onclick=javascript:showText('"+dataJson[i].content+"') >"+
"<p class='p_style' >"+getText(dataJson[i].content)+"</p></div>";
}
$("#content").append(htmlStr);
var imageHtml = "<div class='img' ><img src=images/tantan.png width=100% ></div>";
$("#content").append(imageHtml)
showDiv();
window.setTimeout(function()
{
$("#divxx").css("display","none");
$("#first").css("display","block");
},5000);
})
function showText(text)
{
$("#text").stop();
$("#text").show();
$("#text").html("<table><tr style=height:50px ></tr><tr ><td style=height:200px;width:640px; valign=top > "+text+"</td></tr><tr style=height:50px ></tr>");
$("#text").animate({top:"0px"},1000);
$("#text").animate({top:"-300px"},3000);
}
var start_time = "ready";
var index = -1;
function showDiv()
{
if("ready"==start_time)
{
start_time = "off";
window.setInterval("showAnimate()",getTime());
}
}
function showAnimate()
{
index ++;
var num = index;
if(num==dataJson.length)
{
num = 0;
index = -1;
}
$("#div"+num).css("display","block");
$("#div"+num).animate({top:"-291px",left:getLeft()},10000,end);
}
var end = function()
{
$("#"+this.id).css({"display":"none","top":"1110px","left":getLeft()});
}
function getLeft()
{
return parseInt(340*Math.random());
}
var type = "loadx"
function getTime()
{
return parseInt(800*Math.random()+3000);
}
</script>
</head>
<body>
<div id="divxx"
style="position: absolute; width: 640px; color: white; background: black; height: 1010px">
<img alt="" src="images/loading.gif" width="100%"
style="margin-top: 200px">
</div>
<div id="first" style="display: none">
<div id="text" style="display: none; top: -300px"></div>
<div id="content"></div>
</div>
<div id="svg" style="display: none">
<img alt="" src="images/little.gif" width="100%">
</div>
<div id="end" style="display: none">
<img alt="" src="images/end.gif" width="100%">
</div>
</body>
</html>用到的pagesize.640.js如下：
//<![data[
var targetWidth = 640;
var rate = window.screen.width / targetWidth;
var meta = document.getElementsByTagName('meta');
for(var i=0;i<meta.length;i++){
if( meta[i].getAttribute('name') == "viewport" ){
meta[i].setAttribute('content', "width="+targetWidth.toString()+", target-densitydpi=device-dpi, initial-scale="+rate.toString()+", maximum-scale="+rate.toString());
}
}用到的CSS如下:
body
{
width:640px;
height:1010px;
margin:0px;
padding:0px;
overflow:hidden;
}
#content
{
background:url("../images/bg.jpg");
width:640px;
height:1010px;
position: absolute;
overflow:hidden;
}
.div_style
{
background:url('../images/pao.png');
width:300px;
height:291px;
top:1110px;
display:none;
position:absolute;
text-align: center;
z-index: 555;
font-family:"微软雅黑";
}
.p_style
{
font-family:"微软雅黑";
font-size: 32px;
margin-top:120px;
color:white;
}
#text
{
width: 640px;
height: 200px;
background: black;
color: white;
font-family:"微软雅黑";
text-indent:2em;
position:absolute;
z-index:99999;
letter-spacing: 3px;
opacity:0.7;
font-size: 36px;
}
.img
{
top:780px;
width: 400px;
position:absolute;
left:120px;
z-index: 99999;
}
#second
{
background: url('../images/bg2.jpg');
width: 640px;
height: 1010px;
position: absolute;
}
#info1
{
position: absolute;
top:180px;
left: 210px;
height: 100px;
}
#info2
{
position: absolute;
top:283px;
left: 138px;
height: 100px;
}
#info3
{
position: absolute;
top:386px;
left: 252px;
height: 100px;
}
#info4
{
position: absolute;
top:489px;
left: 195px;
height: 100px;
}
#info5
{
position: absolute;
top:589px;
left: 57px;
height: 100px;
}
#info6
{
position: absolute;
top:689px;
left: 280px;
height: 100px;
}
.local
{
font-size: 36px;
font-family:"微软雅黑";
}
#local1
{
position: absolute;
top:210px;
left: 260px;
color:white;
}
#local2
{
position: absolute;
top:313px;
left: 188px;
color:white;
}
#local3
{
position: absolute;
top:416px;
left: 302px;
color:white;
}
#local4
{
position: absolute;
top:519px;
left: 245px;
color:white;
}
#local5
{
position: absolute;
top:619px;
left: 107px;
color:white;
}
#local6
{
position: absolute;
top:719px;
left: 330px;
color:white;
}
.change
{
position: absolute;
top:0px;
left: 470px;
width: 180px;
z-index: 9999999999;
}
.xxx
{
position: absolute;
top:860px;
left: 90px;
width: 460px;
}
#in
{
position: absolute;
top:884px;
left: 106px;
width: 320px;
background: rgb(25,10,8);
height: 57px;
border-top:0px ;
border-left:0px ;
border-right:0px ;
color: white;
font-size: 32px;
}
.tan
{
position: absolute;
top:880px;
left: 440px;
width: 80px;
font-size: 36px;
font-family:"微软雅黑";
}
#svg
{
position: absolute;
top:300px;
left: 210px;
width: 220px;
}
#end
{
position: absolute;
top:300px;
left: 210px;
width: 220px;
}
项目下载地址:
http://download.csdn.net/detail/wow4464/7937223
浙公网安备 33010602011771号