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 相关文章推荐
jQuery使用post方法提交数据实例
Mar 25 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
php下实现折线图效果的代码
2007/04/28 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
初品cakephp 入门基础
2012/02/16 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php中序列化与反序列化详解
2017/02/13 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python中装饰器学习总结
2018/02/10 Python
Python进度条的制作代码实例
2019/08/31 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
学校师德师风整改方案
2014/10/28 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
Python基础之Socket通信原理
2021/04/22 Python
Python实现排序方法常见的四种
2021/07/15 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers