JQuery实现鼠标移到图片上显示其备注
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<!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 runat="server">
<title></title>
<script src="Scripts/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
var content = new Array("这a是º?一°?个?小?动¡¥画-，ê?还1不?错䨪吧㨦", "这a是º?最Á?好?一°?个?产¨²品¡¤", "也°2有®D最Á?好?的Ì?一°?个?人¨?", "这a个?还1可¨¦怠Ì?驶º?只?整?合?哈t哈t");
$(function () {
$("img").mousemove(function (e) {
$("#disp").text(content[$(this).attr("alt")]).css({ top: (e.pageY + 5), left: (e.pageX + 5) }).show();
// alert(content[$(this).attr("alt")]);
})
$("img").mouseleave(function () {
$("#disp").hide();
})
})
</script>
<style type="text/css">
#disp
{
width: 202px;
height: 122px;
position:absolute;
background-color:#eee;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 820px; height: 163px">
<img alt="0" src="Koala.jpg" style="height: 147px; width: 163px" />
<img alt="1" src="Lighthouse.jpg" style="height: 147px; width: 163px" />
<img alt="2" src="Penguins.jpg" style="height: 147px; width: 163px" />
<img alt="3" src="Tulips.jpg" style="height: 147px; width: 163px" />
</div>
<div id="disp"></div>
</form>
</body>
</html>
JQuery的动画效果（淡入淡出）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 runat="server">
<title></title>
<script src="Scripts/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#Select1").change(function () {
$("img").fadeTo(2000, $(this).val());
})
$("#Button1").click(function () {
$("img").animate({width:"+=100",height:"+=100",top:"50"},2000);
})
})
</script>
<style type="text/css">
#Select1
{
width: 70px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="Select1">
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.8">0.8</option>
</select>
<img alt="" src="Penguins.jpg" style="height: 267px; width: 374px; position:absolute" />
</div>
<input id="Button1" type="button" value="button" />
</form>
</body>
</html>
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
