您的位置：首页 > Web前端 > JQuery

使用JQuery控制输出规定大小的图片

2013-04-19 22:25 309 查看

<head>

<title></title>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

var id = 0;

var tupian;

var zfc;

$('#Text1').blur(function () {

var niwid = id++;

var ming = $('#select2 option:selected').text();

var zhi = $('#Text1').val();

$('#shuxing').append('<p id=p' + id + '>' + ming + '=' + zhi + '</p><input id=b' + id + ' type="button" value="删除" onclick="remove(' + id + ')" />')

zfc += $('#select2 option:selected').val() + "=" + $('#Text1').val() + " ";

})

$('#Button1').click(function () {

tupian = '<' + $('#select1 option:selected').val() + " " + zfc.substr(9) + '/>'

$('#divresult').append(tupian);

tupian = '';

})

})

function remove(id) {

$('#p' + id).remove();

$('#b' + id).remove();

}

</script>

</head>

<body>

标签名:<select id="select1">

<option value='img'>图片</option>

<option value='p'>段落</option>

<option value='text'>文本框</option>

</select><br />

属性名:<select id="select2">

<option value='height'>高</option>

<option value='width'>宽</option>

<option value='src'>图片地址</option>

</select><br />

<input id="Text1" type="text" /><br />

<div id='shuxing'>

</div><br />

<input id="Button1" type="button" value="生成" /><br />

<div id="divresult"></div>

<input id="Hidden1" type="hidden" value="" />

</body>

当程序运行时，我们首先看到的是第一张图片，

当我选中图片时，就可以看到下面的图片，

然后我选择宽度，并在下面的文本框内输入宽度100，高度同理；

然后我输入需要显示的图片的路径，可以看到下面的图片，

最后我点击生成按钮，图片就可以显示出来了，即下图；

当然，删除按钮也可以使用，下面是我删除宽和高后的图片。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航