21视频教程网3月27日整理
在本地调试IE中没问题，怎么上传了在IE里就不起作用了？？奇怪。FF中没问题。
(点"运行代码"按钮后,待页面打开完,再按F5刷新一下页面)
<!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>Clip Test</title>
<style type="text/css">
body
{
margin:0;
padding:15px;
}
.clip
{
position: relative;
height: 499px;
width: 333px;
border: solid 1px #ccc;
cursor:default;
background:#fff;
}
.clip div {
position: absolute;
clip: rect(0px 60px 100px 0px);
width:333px;
height:499px;
background:url(http://home.blueidea.com/attachment/201003/5/76563_126775682722DJ.gif) no-repeat top left;
cursor:default;
}
.pic
{
position: absolute;
height: 499px;
width: 333px;
top:15px;
left:353px;
border: solid 1px #ccc;
background-image:url(http://home.blueidea.com/attachment/201003/5/76563_1267756832oAOz.jpg);
background-repeat: no-repeat;
background-position:0px 0px;
}
</style>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#mov").mousemove(function(event) { MoveRect(event); });
});
var moverW = 60;
var moverH = 100;
function MoveRect(event) {
var x = event.clientX - 15;
var y = event.clientY - 15;
var top = y - moverH / 2;
var right = x + moverW / 2;
var bottom = y + moverH / 2;
var left = x - moverW / 2;
if (top <= 0) {
top = 0;
bottom = moverH;
}
if (left <= 0) {
left = 0;
right = moverW;
}
if (top >= 499 - moverH) {
top = 499 - moverH;
bottom = top + moverH;
}
if (left >= 333 - moverW) {
left = 333 - moverW;
right = left + moverW;
}
$("#img").css("clip", "rect(" + top.toString() + "px " + right.toString() + "px " + bottom.toString() + "px " + left.toString() + "px)");
$("#posi").html(x + ":" + y + " - " + $("#img").css("clip"));
$("#pic").css("background-position", (0 - left * 2.5 * 2) + "px " + (0 - top * 2.5 * 2) + "px");
}
function SetBG(bg) {
$("#mov").css("background", bg);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="clip" id="mov">
<div id="img"></div>
</div>
<div class="pic" id="pic"></div>
<div id="posi"></div>
<div>
背景：
<a href="javascript:void(0);" onclick="javascript:SetBG('#fff');">无</a>
<a href="javascript:void(0);" onclick="javascript:SetBG('url(http://home.blueidea.com/attachment/201003/5/76563_1267756835yzlE.gif) no-repeat top left');">有</a>
<a href="javascript:void(0);" onclick="javascript:SetBG('url(http://home.blueidea.com/attachment/201003/5/76563_12677568353HQg.gif) no-repeat top left');">模糊</a>
</div>
</form>
</body>
</html>
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
