html布局css进行样式美化；代码运行结果预览
收藏
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head><title></title>
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
*{
padding:0;
margin:0;
}
.select{
width:500px;
height:100%;
background-color:antiquewhite;
margin:0 auto;
border-radius:10px;
}
.p1{
width:500px;
height:30px;
line-height:40px;
padding-top:20px;
margin-left:20px;
color:#777;
}
.p1 input{
width:200px;
height:25px;
border-radius:5px;
}
.p2{
width:500px;
height:40px;
margin-top:20px;
margin-left:20px;
color:#777;
}
p button{
width:200px;
height:35px;
margin-left:150px;
margin-bottom:20px;
border-radius:5px;
}
#result{
width:500px;
height:100%;
margin:0 auto;
}
#result img{
box-show:5px 5px 5px #666;
}
</style>
</head>
<body>
<div>
<div class='select'>
<p class="p1">请输入图片地址: <input type="text" name="url" value=""></p>
<p class="p2"> 相 框 类 型:
<input type="radio" name="border"id='zj' value='0' checked><label for='zj'>直角</label>
<input type="radio" name="border" id='yj' value="30"><label for="yj">圆角</label>
<input type="radio" name="border" id='yx' value="100"><label for="yx">圆形</label>
</p>
<p><button class="add">添加</button></p>
</div>
<div id="result">
</div>使用jquery方法：实现图片的添加（设置添加图片显示的时间是3秒），上移，下移，删除（设置删除图片消失的时间是2秒）;
</div>
<script>
$(function(){
$('.add').on('click',function(){
var imgUrl=$('.select input[name="url"]').val();//获取图片地址
// alert(imgUrl)检查是否获取到图片地址
//获取边框
var borderBox=$('.select input[name="border"]:checked').val();
// alert(borderBox)//检查是否获取到边框
var img=$('<img>').attr('src',imgUrl);
img.css('border-radius',borderBox+'px');
var btnup=$('<button>上移</button>');
var btndown=$('<button>下移</button>');
var remove=$('<button>删除</button>');
var imgBox=$('<div></div>');
imgBox.append(img,btnup,btndown,remove);
$('#result').append(imgBox).css('display','none').show(3000);//图片显示时间3秒
btnup.on('click',function(){
imgBox.prev().before(imgBox);
})
btndown.on('click',function(){
imgBox.next().after(imgBox);
})
remove.on('click',function(){
imgBox.toggle(2000);//图片删除时间是2秒
})
})
})
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
