<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="WebApplication1.Demo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.block
{
background-image:url('Form.png');
width: 263px;
height: 103px;
position: relative;
left: 50px;
top: 50px;
}
.innerblock
{
background-color: yellow;
position: relative;
left: 5px;
top: 5px;
}
</style>
<%-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>--%>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<button id="top">
Shift Down</button>
<input type="text" id="txtTopBottom" value="5" />
<button id="bottom">
Shift Up</button>
<button id="left">
Shift Left</button>
<input type="text" id="txtLeftRight" value="5" />
<button id="right">
Shift Right</button>
<div align="left"><br>
<input type="radio" id="BothTextAndImage" name="group1" value="BothTextAndImage" checked="checked"/> Both Text and Image<br/>
<input type="radio" id="ChangeColor" name="group1" value="ChangeColor" /> Change Color<br/>
<input type="radio" id="OnlyText" name="group1" value="OnlyText" /> Only Text<br/>
<hr />
</div>
<div align="left"><br>
<input type="radio" id="z100" name="group2" value="100" checked="checked"/> 100%<br/>
<input type="radio" id="z80" name="group2" value="80" /> 80%<br/>
<input type="radio" id="z60" name="group2" value="60" /> 60%<br/>
</div>
<div class="block">
<div class="innerblock">
<div class="html">
<div style="float:left"><input type="text" id="Text2" value="N" style="width:50px" /></div>
<div style="float:left"><input type="text" id="Text1" value="A" style="width:50px" /></div>
<div style="float:left"><input type="text" id="Text3" value="C" style="width:50px" /></div>
<div style="float:left"><input type="text" id="Text4" value="L" style="width:50px" /></div>
</div>
</div>
</div>
<br />
<script type="text/javascript">
$("#right").click(function () {
var currentVal = parseInt($("#txtLeftRight").val());
if (currentVal != NaN) {
$("#txtLeftRight").val(currentVal + 1);
$(".block").animate({ "left": "+=5px" }, "slow");
}
});
$("#left").click(function () {
var currentVal = parseInt($("#txtLeftRight").val());
if (currentVal != NaN) {
$("#txtLeftRight").val(currentVal - 1);
$(".block").animate({ "left": "-=5px" }, "slow");
}
});
$("#top").click(function () {
var currentVal = parseInt($("#txtTopBottom").val());
if (currentVal != NaN) {
$("#txtTopBottom").val(currentVal + 1);
$(".block").animate({ "top": "+=5px" }, "slow");
}
});
$("#bottom").click(function () {
var currentVal = parseInt($("#txtTopBottom").val());
if (currentVal != NaN) {
$("#txtTopBottom").val(currentVal - 1);
$(".block").animate({ "top": "-=5px" }, "slow");
}
});
$("#BothTextAndImage").click(function () {
$(".block").css({ 'background-image': 'url("Form.png")' });
}
);
$("#ChangeColor").click(function () {
$(".block").css({ 'background-image': 'url("Form2.png")' });
}
);
$("#OnlyText").click(function () {
$(".block").css({ 'background-image': 'none' });
}
);
////////////////
$("#z100").click(function () {
$(".block").animate({ zoom: 1.5 });
}
);
$("#z80").click(function () {
$(".block").animate({ zoom: 1 });
}
);
$("#z60").click(function () {
$(".block").animate({ zoom: 0.6 });
}
);
///////////
</script>
</body>
</html>
No comments:
Post a Comment