使用jQuery修改图片
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="top">
<h3>在线修图</h3>
<p>请输入图片地址：<input type="text" id="url" placeholder="请输入网络图片地址"><label for="url"></label></p>
<p>
修图类型：
<input type="radio" name="photo" id="zj" value="0" checked><label for="zj">直角</label>
<input type="radio" name="photo" id="yj" value="30"><label for="yj">圆角</label>
<input type="radio" name="photo" id="yx" value="100"><label for="yx">圆形</label>
<!--三个输入框给同一个name代表是一组单选框-->
</p>
<button class="btn btn-success">添加</button>
</div>
<div class="result">
</div>
<script>
$('button').on('click',function () { //使用on('click)是为了给生成的动态元素绑定事件，而.click不支持给动态生成的元素绑定事件
var imgUrl = $('#url').val()
// alert(imgUrl) //测试是否获取了输入框内的url地址
var imgBorder = $('input[name="photo"]:checked').val()
// alert(imgBorder) //测试是否获取的选中项的value值
var img = $('<img>').attr('src',imgUrl).width(200) //添加一个img标签，在img标签内部给src添加一个URL。设置img的宽度为200
img.css('border-radius',imgBorder+"px")
var imgBox = $('<div></div')
var moveUp = $('<br><button class="btn btn-success">上移</button>')
var moveDown = $('<button class="btn btn-success">下移</button>')
var removed = $('<button class="btn btn-success">删除</button><br>')
moveUp.on('click',function () {
imgBox.prev().before(imgBox)
})
moveDown.on('click',function () {
imgBox.next().after(imgBox)
})
removed.on('click',function () {
imgBox.remove()
})
imgBox.append(img,moveUp,moveDown,removed)
$('.result').after(imgBox)
})
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
