这是我为一家公司做的移动端气泡墙,跟大家分享下代码。
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="inital-scale=1.0" /> <title>JS实现气泡从水中急速上升效果</title> <script type="text/javascript" src="js/pagesize.640.js" ></script> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/raphael.js" ></script> <style type="text/css"> body { 640px; height:1010px; } #content { background:url("images/bg.jpg"); 640px; height:100%; } body { margin:0px; padding:0px; } #footer { 640px; bottom:0;left:0; background:rgb(12,3,4); height:10%; text-align: center; } </style> <script type="text/javascript"> var jsonData = {"message": [ {"content":"我很不爽ssssssssssssssssssss"}, {"content":"我很不爽sssssssssssssssssssssssssssssss1"}, {"content":"我很不爽ssssssssssssssssssss2"}, {"content":"我很不sssssssssssss爽3"}, {"content":"我很不sssssssssssssss爽4"}, {"content":"xxsssssssssssssssssssssssx5"}, {"content":"xxx6"}, {"content":"OOXXXXOO无所谓"}, {"content":"xxssssssssssssx"}, {"content":"xxx1ssssssssssssss"}, {"content":"xxx2"}, {"content":"xxsssssssssssssssssx3"}, {"content":"xxsssssssssssssx4"}, {"content":"xxsssssssssssssx5"}, {"content":"xxx6"}, {"content":"xxx"}, {"content":"xxx1"}, {"content":"xxx2"}, {"content":"xxx3"}, {"content":"xxx4"}, {"content":"xxx5"}, {"content":"xxx6"}, {"content":"xxx"}, {"content":"xxx1"}, {"content":"xxx2"}, {"content":"xxx3"}, {"content":"xxx4"}, {"content":"xxx5"}, {"content":"xxx6"}, ] } var start_y = 1010; var start_x = 10; var start_height = 550; var paper; var last; var left_set_array = new Array(2,100,250,330); var paper1 = false; //初始化画布 $(function() { paper = Raphael(0,0,640,1010,"content"); drawImage(); var href = paper.image("images/tantan.png",170,900,300,110); href.click(function() { }) }) //返回随机数与数组结合定义x轴坐标 function getOfferSet() { return parseInt(4*Math.random()); } //动画回调事件 var reload = function() { if(this.id == last) { drawImage(); } this.remove(); } var last_time = 10000; //绘制气泡和文字添加动画事件 function drawImage() { start_height = 550; var time = 0; for(var i = 0;i<jsonData.message.length;i++) { var info = jsonData.message[i].content; var text_info = getImageWidth(jsonData.message[i].content);//文本内容 var width = 300; var x = left_set_array[getOfferSet()]; var stop_x = left_set_array[getOfferSet()]; var image = paper.image("images/pao.png",x,start_height,width,width); var text = paper.text(x+image.attr("width")/2,start_height+image.attr("width")/2+5,text_info); text.attr({"font-familly":"Microsoft YaHei","stroke":"rgb(252,255,219)","stroke-width":"2","font-size":"30px"}); image.text = jsonData.message[i].content; //点击查看详情信息 image.click(function() { showInfo(this.text); }) //图片和文字动画效果 image.animate({x:stop_x,y:0},last_time+2000*i,{opacity:0.5},reload); text.animate({x:stop_x+image.attr("width")/2,y:0+image.attr("width")/2-5},last_time+2000*i,{opacity:0.5},reload); if(i==parseInt(jsonData.message.length-2)) { last = image.id; } start_height = start_height + width*2; } } //根据文字长度定义气泡大小 function getImageWidth(content) { var length = content.length; var content_array = content.split(""); var content_info = ""; for(var i = 0;i<7;i++) { if(content_array[i]!=null) { content_info += content_array[i]; } } //超出7个字加省略号 if(length>7) { return content_info+"..."; } else { return content_info; } } var rect_id = "off"; var t_id = false; //显示上内容条具体信息 function showInfo(text) { if("off"!=rect_id) { var re = paper.getById(rect_id); re.remove(); var tt = paper.getById(t_id); tt.remove(); var rect = paper.rect(0,0,640,100).attr({"fill":"block","opacity":0.4}); var text = paper.text(320,50,text).attr({"stroke":"white","font-size":"32px","font-familly":"Microsoft YaHei"}); rect_id = rect.id; t_id = text.id; rect.animate({x:0,y:0},2000,{"opacity":0.1},callback); text.animate({x:320,y:50},2000,{"opacity":0.1},callback); } else { var rect = paper.rect(0,0,640,100).attr({"fill":"block","opacity":0.4}); var text = paper.text(320,50,text).attr({"stroke":"white","font-size":"32px","font-familly":"Microsoft YaHei"}); rect_id = rect.id; t_id = text.id; rect.animate({x:0,y:0},2000,{"opacity":0.1},callback); text.animate({x:320,y:50},2000,{"opacity":0.1},callback); } } //上方内容动画回调函数 function callback() { rect_id = "off"; t_id = false; this.remove(); } </script> </head> <body> <div id="content" ></div> </body> </html>
代码免费下载地址:https://github.com/medivhQ/bubble
本来想上传到CSDN上,可惜晚上资源站崩溃了。
http://download.csdn.net/detail/wow4464/7937213(补上)
效果图如下: