登录  /  注册
博主信息
博文 36
粉丝 1
评论 0
访问量 31386
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jQuery制作简单相册管理_2018年9月18日
宋超的博客
原创
1087人浏览过

相册管理实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线相册管理</title>
    <script src="lib/jquery.js"></script>
    <style>
        .warp{
            width:400px;
            height:auto;
            background-color:lightcyan;
            border:3px double darkgrey;
            color:#363636;
            border-radius:2%;
        }
        .warp .header{
            padding: 15px;
        }
        .warp .header h2{
            text-align: center;
        }
        .add{
            width:100px;
            height:30px;
            border:none;
            background-color: #539ff3;
            color:white;
            cursor:pointer;
        }
        .warp select{
            height:30px;
        }
        .add:hover{
            background-color:mediumpurple;
            font-size:1.1rem;
        }
        .main{
            overflow: hidden;
        }
        .main ul{
            padding:0;
            margin:0;
        }
        .main ul li{
            list-style-type: none;
            float:left;
            margin-left:20px;
            margin-botton:10px;
            width:150px;
            height:200px;
            text-align: center;
        }
        .main ul li button{
            margin:3px;
            border:none;
            border-radius: 5%;
            background-color: mediumpurple;
        }
        .main ul li button:hover{
            background-color: mediumpurple;
            color:white;
            cursor:pointer;
        }


    </style>
</head>
<body>
<div class="warp">
    <div class="header">
        <h2>英雄排行</h2>
        <p>
            <label for="img_url">图片地址</label>
            <input type="file" name="img_url" id="img_url" placeholder="上传图片">
        </p>
        <p>
            图片类型:
            <input type="radio" id="rect" name="border" value="0"><label for="rect">直角</label>
            <input type="radio" id="radius" name="border" value="10%"><label for="radius">圆角</label>
            <input type="radio" id="circle" name="border" value="50%"><label for="circle">圆形</label>
        </p>
        <p>是否添加阴影:
            <select name="shadow">
                <option value="0">不添加 </option>
                <option value="1">添加 </option>
            </select>
        </p>
        <p><button class="add">添加图片</button></p>
    </div>
    <div class="main">
        <ul>

        </ul>
    </div>
</div>


<script>

    $(function () {

        $('button.add').on('click',function () {
            //1.获取图片信息
            let img_url = $('#img_url').val();
            if(img_url.length ===0){
                alert('请选张图');
                $('#img_url').focus();
                return false;
            }
            //获取图片基本特征
            //获取图片外观角度
            let img_type = $(':radio:checked').val();
            //是否添加阴影
            let shadow = 'none';
            if ($(':selected').val() === '1') {
                shadow = '3px 3px 3px #666';
            }
            // console.log($(':selected').val());
            // 2.创建图片并添加到页面
            console.log('http://php.cc/20180918/img/'+img_url.split('\\')[2]);
            img_url = 'http://php.cc/20180918/img/'+img_url.split('\\')[2];


            //2.创建图片并添加到页面中
            let img = $('<img>')
                .prop('src',img_url)
                .width(150)
                .height(150)
                .css({ //给标签设置style属性
                    'border-radius': img_type,
                    'box-shadow': shadow
                                    });
            let before = $('<button></button>').text('前移');
            let after = $('<button></button>').text('后移');
            let remove = $('<button></button>').text('删除');
            //创建一个Li放内容
            let contaier = $('<li>');
            //将图片和三个按钮打包到<li>中
            contaier.append(img,before,after,remove);
            // 将li添加到页面中的ul中
            contaier.appendTo('ul');
        // 3.为三个操作添加功能
            //前移功能
            before.on('click',function () {
                let current = $(this).parent();
                let prev = current.prev();//前一个元素
                //在前一个元素之前将当前元素插入,交换位置
                prev.before(current);
            });
            //后移功能
            after.on('click',function () {
                let current = $(this).parent();
                let after = current.next();//后一个元素
                //在下一个元素之前将当前元素插入,交换位置
                after.after(current);
            });
            //删除
            remove.on('click',function () {

                if(confirm('确认删除?')){
                    $(this).parent().remove();
                }
                return false;
            });

        })



    });


</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例




360截图20180920231919874.jpg

总结:本节用到前面所学到的获取元素,插入元素还有控制元素样式,删除元素

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学