可拖拽许愿墙实现:jQuery UI交互与本地存储方案

这篇文章主要介绍了jquery实现可拖拽的许愿墙效果,可实现拖拽图片与层叠显示功能,涉及jquery插件的简单使用,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了jQuery实现可拖拽的许愿墙效果。分享给大家供大家参考,具体如下:

运行效果图如下:

这里简单介绍下功能点:

① 随机显示背景图或背景色
② 出现的位置随机
③ 可以通过拖拽改变位置

好了,附上代码:

1

2

3

4

5

6

7

8

9

10

11

12

nbsp;html>

 

 

  <meta>

  <title>许愿墙</title>

  <link>

  <style>

  #wish{height:650px;margin:20px;position:relative;width:960px;}

  .wish{background:url(wish_bg.png) no-repeat 0 0;color:#000;height:166px;padding:10px 20px 30px 20px;width:185px;}

  .wish-close{background:url(wish_close_bg.png) no-repeat 0 0;display:none;position:absolute;right:5px;top:-5px;width:17px;height:17px;}

  </style>

   

        
  • 11111
  •     
  • 22222
  •     
  • 33333
  •     
  • 44444
  •     
  • 55555
  •   
<script></script><script></script><script></script><script> $(function(){ $(&#39;#wish&#39;).wish(); $(&#39;.wish&#39;).draggable({containment:&#39;#wish&#39;,scroll:false}); }); </script>

注意:

jqueryui 需要加载 draggable 和 scale Effect,draggable 是支持拖拽,而 scale Effect 是点击关闭的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jQuery和canvas实现的球体平抛及颜色动态变换效果

jQuery右下角旋转环状菜单特效的实现

以上就是jQuery实现可拖拽的许愿墙效果的详细内容,更多请关注php中文网其它相关文章!

QR Code
微信扫一扫,欢迎咨询~

联系我们
武汉格发信息技术有限公司
湖北省武汉市经开区科技园西路6号103孵化器
电话:155-2731-8020 座机:027-59821821
邮件:tanzw@gofarlic.com
Copyright © 2023 Gofarsoft Co.,Ltd. 保留所有权利
遇到许可问题?该如何解决!?
评估许可证实际采购量? 
不清楚软件许可证使用数据? 
收到软件厂商律师函!?  
想要少购买点许可证,节省费用? 
收到软件厂商侵权通告!?  
有正版license,但许可证不够用,需要新购? 
联系方式 155-2731-8020
预留信息,一起解决您的问题
* 姓名:
* 手机:

* 公司名称:

姓名不为空

手机不正确

公司不为空