运行效果：
说明：
使用基于Bootstrap的H-ui框架，通过动态添加css类来设置图片效果。
示例源码：
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册管理</title>
<link rel="stylesheet" href="http://demo.h-ui.net/H-ui.admin/3.1/static/h-ui/css/H-ui.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="containBox">
<div class="containBox-bg"></div>
<div class="wap-container">
<div class="container ui-sortable">
<div class="panel panel-default mt-20">
<div class="panel-header selected">图片</div>
<div class="album">
<div class="select">
<div class="row cl">
<label class="form-label col-sm-2 col-md-2 col-md-offset-2">输入图片地址：</label>
<div class="formControls col-sm-5 col-md-5">
<input type="text" name="url" class="input-text">
</div>
</div>
<div class="row cl">
<label class="form-label col-sm-2 col-md-2 col-md-offset-2">相框类型：</label>
<div class="formControls col-sm-5 col-md-5">
<input type="radio" id="zj" name="border" class="radio-blue" value="0" checked><label for="zj">方形</label>
<input type="radio" id="yj" name="border" class="radio-blue" value="1"><label for="yj">圆形</label>
<input type="radio" id="yx" name="border" class="radio-blue" value="2"><label for="yx">相框</label>
</div>
</div>
<div class="row cl">
<div class="formControls col-md-5 col-md-offset-2">
<button class="add btn btn-primary size-L">添加</button>
</div>
</div>
</div>
</div>
<div class="panel-body" style="display: block;">
<div class="result"></div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.add').on('click', function () {
//获取图片地址
var imgUrl = $('.select input[name= "url"]').val();
//获取相框类型
var imgBorder = $('.select input[name="border"]:checked').val();
//创建一个图片元素,并将用户的图片url,添加到新元素上
var img = $('<img>').attr('src', imgUrl).width(150);
switch(imgBorder)//注意，值是字符串，不是整数
{
case '0':
img.addClass('radius');//方形效果
break;
case '1':
img.addClass('round');//圆形效果
break;
case '2':
img.addClass('thumbnail');//相框效果
break;
}
//创建一个容器,用来放图片
var imgBox = $('<div></div>');
//创建上移按钮
var moveUp = $('<button class="btn btn-success radius" style="margin-left: 10px;margin-right: 10px">上移</button>');
//创建个下移按钮
var moveDown = $('<button class="btn btn-success radius" style="margin-right: 10px">下移</button>');
//创建删除按钮
var remove = $('<button class="btn btn-warning radius">删除</button>');
//上移事件
moveUp.on('click', function () {
//在它的前一个兄弟节点之前插入
imgBox.prev().before(imgBox);
});
//为下移添加点击事件
moveDown.on('click', function () {
//在他的下一个兄弟节点之后插入
imgBox.next().after(imgBox);
});
//移除事件
remove.on('click', function () {
//删除整个节点
imgBox.remove();
});
//将各元素放入容器
imgBox.append(img, moveUp,moveDown,remove);
//将容器放到页面上
$('.result').append(imgBox);
})
</script>
</body>
</html>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
