星型许愿墙如何布局?

引入jquery库 script type = text/javascript src = js/jquery-1.9.1.js / script 许愿墙css样式: .wish{ width : 920px ; height : 302px ; margin : 0 auto ; padding : 10px ; background : #eee } .wish-L{ float : left ; position : relative ; width :

引入jquery库

  1. <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 

许愿墙css样式:

  1. .wish{width:920pxheight:302pxmargin:0 autopadding:10pxbackground:#eee
  2. .wish-L{float:leftposition:relativewidth:300pxheight:300pxtext-align:centerborder:1px solid #ddd
  3. .wish-R{float:rightposition:relativewidth:600pxheight:300pxborder:1px solid #dddoverflow:hidden
  4. .wish-L img{margin-top:40px
  5. .wish-L tt{position:absolute; top:40%; left:0font-size:22pxwidth:100%height:20pxline-height:20pxtext-align:center
  6. .item{position:absolutez-index:10cursor:pointerwidth:100pxheight:100pxtext-align:center
  7. .item tt{position:absolute; top:30%; left:0width:100%z-index:2
  8. .item img{width:100%

许愿墙html结构,假设许愿数据已经读取到(实际操作需要从后台获取,比如xml或json数据格式都可以):

  1. <div class="wish clearfix"> 
  2.     <div class="wish-L" id="js-wish"> 
  3.         <img src="heart.png" width="80%" alt="许愿" /><tt>许愿内容</tt> 
  4.     </div> 
  5.      
  6.     <div class="wish-R" id="js-item"> 
  7.         <span class="item"><img src="heart.png" alt="金榜题名" /></span> 
  8.         <span class="item"><img src="heart.png" alt="做个好梦" /></span> 
  9.         <span class="item"><img src="heart.png" alt="心想事成" /></span> 
  10.         <span class="item"><img src="heart.png" alt="工作顺利" /></span> 
  11.         <span class="item"><img src="heart.png" alt="出国旅游" /></span> 
  12.         <span class="item"><img src="heart.png" alt="身体健康,万事如意" /></span> 
  13.         <span class="item"><img src="heart.png" alt="I LOVA U" /></span> 
  14.     </div> 
  15. </div> 

实现许愿墙效果的JS:

  1. $(function(){ 
  2.     $("#js-item").find(".item").each(function(){ 
  3.         $(this).append('<tt>'+$(this).find('img').attr('alt')+'</tt>'); 
  4.         var w = RandomFn(100,200)//具体的区间值可以根据外部容器大小来设置 
  5.         var L = RandomFn(-10,400) 
  6.         var T = RandomFn(-10,100) 
  7.         $(this).animate({ 
  8.             width:w, 
  9.             height:w, 
  10.             left:L, 
  11.             top:T 
  12.         }) 
  13.     }) 
  14.     $("#js-item").find(".item").click(function(){ 
  15.         $('#js-wish').find('tt').remove(); 
  16.         $('#js-wish').append('<tt>'+$(this).find('img').attr('alt')+'</tt>'
  17.     }) 
  18. }) 
  19. //区间随机数 
  20. function RandomFn(min,max){//含min~max的随机数 
  21.     return Math.floor(min+Math.random()*(max-min)); 

 这样一个基础的许愿墙做好了,心型大大小小且随机摆放,网友只需要将以上代码运行即可看到效果,心型图片记得做一个哦o(∩_∩)o 

如有疑问,欢迎在底下留言。

 

相关经验

导读书签
书签初始化中…