WEB前端开发人员交流社区

搜索
查看: 1057|回复: 0

[HTML] 许愿墙效果源码

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-2-23 17:59:30 | 显示全部楼层 |阅读模式
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>许愿墙</title> 
  <style>
        body{
                background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
                background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
                overflow: hidden;
                font-family: '微软雅黑',
                font-size: 16px;
                     height:1500px;
        }
        .item {
                width: 200px;
                height: 200px;
                line-height: 30px;
                -webkit-border-bottom-left-radius: 20px 500px;
                -webkit-border-bottom-right-radius: 500px 30px;
                -webkit-border-top-right-radius: 5px 100px;
                -moz-border-bottom-left-radius: 20px 500px;
                -moz-border-bottom-right-radius: 500px 30px;
                -moz-border-top-right-radius: 5px 100px;
                box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
                -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
        }
        #container p{
                height: 80px;
                margin: 30px 10px;
                overflow: hidden;
                word-wrap: break-word;
                line-height: 1.5;
        }
        #container a{
                position: relative;
                left: 150px;
                coler: red;
                font-size: 14px;
        }
        input{
                display:block;
                height: 30px;
                padding: 0 1em;
                line-height: 30px;
                width: 300px;
                margin: 85px auto;
                font-size: 20px;
        }
  </style> 
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 
 </head> 
 <body> 
  <div id="container" style="height:520px;"> 
  </div> 
  <input id="input" type="text" placeholder="随便说说吧..." />  
  <script>
  (function ($) {
        
        var container;
        
        // 可选颜色
        var colors = ['#96C2F1', '#BBE1F1', '#E3E197', '#F8B3D0', '#FFCC00'];
        
        //创建许愿页
        var createItem = function(text){
                var color = colors[parseInt(Math.random() * 5, 10)]
                $('<div class="item"><p>'+ text +'</p><a href="#">关闭</a></div>').css({ 'background': color }).appendTo(container).drag();
        };
        
        // 定义拖拽函数
    $.fn.drag = function () {
                
        var $this = $(this);
        var parent = $this.parent();
                
        var pw = parent.width();
        var ph = parent.height();
        var thisWidth = $this.width() + parseInt($this.css('padding-left'), 10) + parseInt($this.css('padding-right'), 10);
        var thisHeight = $this.height() + parseInt($this.css('padding-top'), 10) + parseInt($this.css('padding-bottom'), 10);

        var x, y, positionX, positionY;
        var isDown = false; 

        var randY = parseInt(Math.random() * (ph - thisHeight), 10);
        var randX = parseInt(Math.random() * (pw - thisWidth), 10);


        parent.css({
            "position": "relative",
            "overflow": "hidden"
        });
                
        $this.css({
            "cursor": "move",
            "position": "absolute"
        }).css({
            top: randY,
            left: randX
        }).mousedown(function (e) {
            parent.children().css({
                "zIndex": "0"
            });
            $this.css({
                "zIndex": "1"
            });
            isDown = true;
            x = e.pageX;
            y = e.pageY;
            positionX = $this.position().left;
            positionY = $this.position().top;
            return false;
        });
                
                
        $(document).mouseup(function (e) {
            isDown = false;
        }).mousemove(function (e) {
            var xPage = e.pageX;
            var moveX = positionX + xPage - x;

            var yPage = e.pageY;
            var moveY = positionY + yPage - y;

            if (isDown == true) {
                $this.css({
                    "left": moveX,
                    "top": moveY
                });
            } else {
                return;
            }
            if (moveX < 0) {
                $this.css({
                    "left": "0"
                });
            }
            if (moveX > (pw - thisWidth)) {
                $this.css({
                    "left": pw - thisWidth
                });
            }
            if (moveY < 0) {
                $this.css({
                    "top": "0"
                });
            }
            if (moveY > (ph - thisHeight)) {
                $this.css({
                    "top": ph - thisHeight
                });
            }
        });
    };
        
        // 初始化
        var init = function () {
                
                container = $('#container');
                
                // 绑定关闭事件
                container.on('click','a',function () {
                        $(this).parent().remove();
                }).height(($(window).height() -200) < 0? 520 : ($(window).height() -200))
                  .width(($(window).width() -200) < 0? '100%' : $(window).width());

                var tests = ['道友,还处在凝气期吗?', 'I have a dream...', '路漫漫其修远兮。。。', '与自己为敌,与自己为友', '既然选择了远方,便只顾风雨兼程!'];
                $.each(tests, function (i,v) {
                        createItem(v);
                });
                
                // 绑定输入框
                $('#input').keydown(function (e) {
                        var $this = $(this);
                        if(e.keyCode == '13') {
                                var value = $this.val();
                                if(value) {
                                        createItem(value);
                                        $this.val('');
                                }
                        }
                });
                
        };
        
        $(function() {
                init();
        });
        
})(jQuery);
  </script> 
 </body>
</html>

在线预览地址
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-10-27 08:24

快速回复 返回顶部 返回列表