jQuery实现可拖拽的许愿墙效果【附demo源码下载】


Posted in Javascript onSeptember 14, 2016

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

运行效果图如下:

jQuery实现可拖拽的许愿墙效果【附demo源码下载】

这里简单介绍下功能点:

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

好了,附上代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>许愿墙</title>
  <link rel="stylesheet" href="base.min.css"/>
  <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>
</head>
<body>
  <ul id="wish">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
  </ul>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="wish.js"></script>
<script>
$(function(){
  $('#wish').wish();
  $('.wish').draggable({containment:'#wish',scroll:false});
});
</script>

注意:

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

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript URL编码和解码使用说明
Apr 12 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
再谈javascript注入 黑客必备!
Sep 14 #Javascript
AngularJS 表达式详解及实例代码
Sep 14 #Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 #Javascript
js注入 黑客之路必备!
Sep 14 #Javascript
AngularJS 模块化详解及实例代码
Sep 14 #Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 #Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 #Javascript
You might like
晶体管单管来复再生式收音机
2021/03/02 无线电
php xml文件操作实现代码(二)
2009/03/20 PHP
php中的观察者模式
2010/03/24 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
详解javascript遍历方式
2015/11/11 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
angular内置provider之$compileProvider详解
2017/09/27 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
Python开发编码规范
2006/09/08 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
软件测试工程师面试问题精选
2016/10/28 面试题
会计主管岗位职责范文
2013/11/08 职场文书
商场活动策划方案
2014/01/24 职场文书
考试没考好检讨书
2014/01/31 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
群教个人对照检查材料
2014/08/20 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python