Jquery 实现许愿墙效果，可拖拽

浏览数：38 / 时间：2015年06月09日

先简单的介绍下功能点：

  • 随机显示背景图或背景色
  • 出现的位置随机
  • 可以通过拖拽改变位置
<!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;}
    .s1 { background: url(s1.png); }
    .s2 { background: url(s2.png); }
    .s3 { background: url(s3.png); }
    .s4 { background: url(s4.png); }
    .s5 { background: url(s5.png); }
    </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 是点击关闭的效果。

点此此处下载文件

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style src html 文件 com log http si class style src html 文件 com log http si

相关文章

随机文章

您可能还喜欢

您可能还喜欢