博客列表 >实例之jQuery——在线相册管理器-(2018年4月10日15点30分)

实例之jQuery——在线相册管理器-(2018年4月10日15点30分)

一枝黄花
一枝黄花原创
2018年04月10日 15:32:37502浏览

实例之jQuery——在线相册管理器-(2018年4月10日15点30分)

效果预览图

QQ截图20180410152635.png

在线相册管理器代码

实例

<!--注释-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery实战之在线相册管理器</title>
  <link rel="stylesheet" type="text/css" href="css/2.css">
  <script type="text/javascript" src="../ajax/js/jquery.js"></script>
	<script type="text/javascript" src="../ajax/js/1.js"></script>

</head>
<body>
<div class="wrap">
		<div class="header">
			<h2>在线相册管理器</h2>
			<p>
<label>请输入图片的地址</label>
<input type="text" name="img_url" id="img_url" placeholder="../images/xxx.png">
</p>
<p>请选择图片类型:
<input type="radio" id="rect" name="border" value="0" checked><label for="rect">直角</label>
<input type="radio" id="radius" name="border" value="20%" checked><label for="radius">圆角</label>
<input type="radio" id="circle" name="border" value="50%" checked><label for="circle">圆形</label>
</p>
<p>图片是否添加阴影:
<select name="shadow">
<option value="0" selected>不添加</option>
<option value="1">添加</option>
</select>
</p>
<p><button class="add">添加图片</button></p>
<div class="main">
<ul>
</ul>
</div>
</div>
</div>
</body>
</html>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议