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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
再谈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
在php中取得image按钮传递的name值
2006/10/09 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
PHP类的特性实例分析
2016/09/28 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
Javascript实现的分页函数
2007/02/07 Javascript
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python实现简易云音乐播放器
2018/01/04 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python生成器generator用法示例
2018/08/10 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Tensorflow 实现释放内存
2020/02/03 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
社区工作者感言
2014/03/02 职场文书
法律进企业活动方案
2014/03/04 职场文书
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL