最近整理做过的项目，发现有个许愿墙的效果，今天拿出来给大家分享下。

先简单的介绍下功能点：

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

好了，附上代码：

<!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】jquery 实现许愿墙效果，可拖拽的更多相关文章

  1. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  2. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

  3. jquery.dad.js实现table的垂直拖拽（并取到当前拖拽对象）

    http://sc.chinaz.com/jiaoben/161202572210.htm 1.首先官网实例,实现的都是div为容器的元素拖拽,示例如下: 2.最近的项目,要实现tbody的每一行tr ...

  4. 网站开发常用jQuery插件总结(三）拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  5. jquery UI 跟随学习笔记——拖拽（Draggable）

    引言 这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI插件,以及jquery库学习. 我用了两天的时候熟悉Interactions模块中的Dragg ...

  6. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

  7. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  8. 分享html5的一个拖拽手法

    就是这样的效果:拖拽之前 之后: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. 基于svg.js实现对图形的拖拽、选择和编辑操作

    本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...

随机推荐

  1. C#基础第二天-作业-九九乘法表-打印星星

    一.打印九九乘法表图形为下列效果图中的三角型的一种例: 图一效果1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4=8 3*4=12 4*4=16 1*5=5 ...

  2. activiti主要API对象

    ProcessEngine         //流程引擎 RuntimeService      //与流程实例,执行对象(正在执行) TaskService           //正在执行任务 H ...

  3. iOS 中strong，weak，copy，assign区别

    1:ARC环境下,strong代替retain.weak代替assign2:weak的作用:在ARC环境下,,所有指向这个对象的weak指针都将被置为nil.这个T特性很有用,相信很多开发者都被指针指 ...

  4. Atitit 我们的devops战略与规划 规范 推荐标准

    Atitit 我们的devops战略与规划 规范 推荐标准 1. Vm容器化1 2. 热部署tomcat+jrebel 或者resin1 3. 增量更新与差异更新1 4. 补丁提取与应用2 为了方便提 ...

  5. 深入理解Linux内核－内存寻址

    1.逻辑地址怎么转换为线性地址的: 逻辑地址 ＝ 段选择符(16bit)+偏移量(32bit) 段选择符又三部分组成:index(索引序号).T1(表指示器).RPL(request privileg ...

  6. .NET CORE EF 框架调用存储过程

    ; //多个参数多表组合值 SqlParameter[] Param = { new SqlParameter("@UserId", System.Data.SqlDbType.V ...

  7. c++11实现一个简单的lexical_cast

    boost中有一个lexical_cast可以用统一的方式来做基本类型之间的转换,比如字符串到数字,数字到字符串,bool和字符串及数字之间的相互转换.boost::lexical_cast的用法比较 ...

  8. diocp3-服务器的连接上限是到底是多少?diocp3的一个装13测试(8W连接数)

    服务器的连接上限是到底是多少?diocp3开源项目的一个装13测试(8W连接数) 测试DEMO路径 diocp3\samples\ECHO 之前群里说一台服务器最多是High(Word)的连接数655 ...

  9. 多媒体文件格式之MKV

    [时间:2016-07] [状态:Open] MKV是一种开源的多媒体封装格式,是Matroska中应用比较多的格式之一.常见的后缀格式是.mkv(视频,包括音频和字幕)..mka(纯音频)..mks ...

  10. UnicodeDecodeError: 'ascii' codec can't decode byte 0xa3 in position 1: ordinal not in range(128)

    使用codecs模块 codecs模块能在处理字节流的时候提供很大帮助.你可以用定义的编码来打开文件并且你从文件里读取的内容会被自动转化为Unicode对象. 试试这个: >>> i ...