写真左右観光
29097 ワード
ページ:
コード
コード
画像の相対位置が設定されていないと、カーソルを計算するのが面倒くさいです.
imgs.css
空間using System.Runtime.Serializationを導入します.
実休類imaginfo.cs
空間using System.Runtime.Serialzation.Jsonを導入します.
Jsonデータ転送を取得します
コード
コード
<!
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
>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/show-imgs.js"></script>
<link type="text/css" href="css/imgs.css" rel="Stylesheet" />
<
title
></
title
>
</
head
>
<
body
>
<
div
><
img id
=
"
img1
"
alt
=
""
/></
div
>
<
input type
=
"
hidden
"
id
=
"
index
"
value
=
"
0
"
/>
</
body
>
</
html
>
コード
var data;
//
( json )
$(function() {
$.ajax({
type:
"
POST
"
,
url:
"
Handler1.ashx
"
,
dataType:
"
json
"
,
success: function(msg) {
data
=
msg;
$(
"
#img1
"
).attr({ height:
300
, width:
400
})
$(
"
#img1
"
).attr(
"
src
"
,data[
0
].name);
},
error: function(err) {
alert(err);
}
})
//
var derection
=
"
pre
"
;
//
$(
"
#img1
"
).mousemove(function(e) {
var x
=
e.originalEvent.x
||
e.originalEvent.layerX
||
0
;
if
(x
<=
$(
this
).width()
/
2
) {
this
.style.cursor
=
"
url('image/pre.cur'),auto
"
;
derection
=
"
pre
"
}
else
{
this
.style.cursor
=
"
url('image/next.cur'),auto
"
;
derection
=
"
next
"
}
})
//
，
$(
"
#img1
"
).click(function() {
var index
=
0
;
if
(derection
==
"
pre
"
) {
if
(Number($(
"
#index
"
).attr(
"
value
"
))
==
0
) {
$(
"
#img1
"
).attr(
"
src
"
, data[
0
].name)
}
else
{
index
=
Number($(
"
#index
"
).attr(
"
value
"
))
-
1
$(
"
#img1
"
).attr(
"
src
"
, data[index].name)
$(
"
#index
"
).attr(
"
value
"
, index)
}
}
else
{
if
(Number($(
"
#index
"
).attr(
"
value
"
))
==
data.length
-
1
) {
$(
"
#img1
"
).attr(
"
src
"
, data[data.length
-
1
].name)
}
else
{
index
=
Number($(
"
#index
"
).attr(
"
value
"
))
+
1
$(
"
#img1
"
).attr(
"
src
"
, data[index].name)
$(
"
#index
"
).attr(
"
value
"
, index)
}
}
})
})
画像の相対位置が設定されていないと、カーソルを計算するのが面倒くさいです.
imgs.css
img{ position:relative; border:
0
}
空間using System.Runtime.Serializationを導入します.
実休類imaginfo.cs
[DataContract]
public
class
ImageInfo
{
[DataMember]
public
string
name {
get
;
set
; }
[DataMember]
public
int
value {
get
;
set
; }
}
空間using System.Runtime.Serialzation.Jsonを導入します.
Jsonデータ転送を取得します
コード
///
<summary>
///
$codebehindclassname$
///
</summary>
[WebService(Namespace
=
"
http://tempuri.org/
"
)]
[WebServiceBinding(ConformsTo
=
WsiProfiles.BasicProfile1_1)]
public
class
Handler1 : IHttpHandler
{
public
void
ProcessRequest(HttpContext context)
{
context.Response.ContentType
=
"
text/plain
"
;
context.Response.Write(GetImageInfo());
}
private
string
GetImageInfo()
{
string
path
=
HttpContext.Current.Server.MapPath(
"
image
"
);
string
[] files
=
Directory.GetFiles(path);
JQueryDemo.Data.ImageInfo[] imageinfo
=
new
JQueryDemo.Data.ImageInfo[files.Length];
for
(
int
i
=
0
; i
<
files.Length; i
++
)
{
imageinfo[i]
=
new
JQueryDemo.Data.ImageInfo() { name
=
files[i].ToString(), value
=
i };
}
DataContractJsonSerializer json
=
new
DataContractJsonSerializer(imageinfo.GetType());
MemoryStream ms
=
new
MemoryStream();
json.WriteObject(ms, imageinfo);
ms.Position
=
0
;
StreamReader sr
=
new
StreamReader(ms);
string
info
=
sr.ReadToEnd();
return
info;
}
public
bool
IsReusable
{
get
{
return
false
;
}
}
}