var $content = $("#dc").val();//变量1 文本 var $jieshou = $("#main");//被插入的地方 $jieshou.append("<img src='icon/1.png'>" , "<p>"+":"+$content+"</p>");//表达式
问题来了,单独插入图片或者文本都可以实现,但是两者相加后就只能输入文字,不能同时输出文本加图片。有大佬解释一下为什么吗?
还是不能用append方法,
完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/danmu.css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/animate.min.js"></script> </head> <body> <script> $(document).ready(function () { $("#send1").click(function () { var pageH=parseInt($("#main").height()); var $content = $("#dc").val(); var $jieshou = $("#main"); // var $img = $("#img2").html("<img src='icon/2.png'>"); // $img.css({"width":"30px","height":"30px",}); var _top=parseInt(Math.random()*pageH); $jieshou.append("<img src='icon/1.png'>" , "<p>"+":"+$content+"</p>"); $("p:last-child").css({"top":_top,"color":"white",}); $("p:last-child").animate({"left":"-200px"},8000); $("img:last-child").css({"width":"30px","height":"30px","top":_top}); $("img:last-child").animate({"left":"-200px"},8000); }) }) </script> <div id="content"> <div id="main"> <p></p> </div> <div id="send"> <div id="co"> <button id="open">开启弹幕</button> <button id="close">关闭弹幕</button> </div> <div id="danmu"> <input type="text" placeholder="发个友好的弹幕" id="dc"> </div> <div id="finish"> <button id="send1">发送</button> </div> </div> </div> </body> </html>
实现一个弹幕图片+文字的效果
可以
$jieshou.append("<img src='icon/1.png'>" , "<p>"+":"+$content+"</p>");
$jieshou.append("<img src='icon/1.png'><p>"+":"+$content+"</p>"); 直接连着写就行 亲测可以