昨天突然说要做盖章的效果,弄了一个,正在优化,大家多多指点
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盖章认证</title>
<link href="../img.17k.com/css/readbook.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="../img.17k.com/js/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//盖章认证
var isStamp=true;
var isBt_stamp=false;
$("#bigImg #stamp").click(function(event){
if(isStamp==false){
var x=(event.clientX)-($(this).offset().left);
var y=(event.clientY)-($(this).offset().top);
$("#txtX").html(x);
$("#txtY").html(y);
$(this).prepend("<small style=\"left:"+x+"px;top:"+(y-15)+"px;\" title=\"刘卿大师\">刘卿大师</small>");
$("body").css("cursor","auto");
isStamp=true;
}else{return false;}
});
$("#bt_stamp").click(function(){
if(isBt_stamp==false){
alert("鼠标移到书封面上点击盖章！");
$("body").css("cursor","url(http://img.17k.com/images/readbook/stamp.cur)");
isStamp=false;
isBt_stamp=true;
} else{alert("只能盖一次章！");}
});
});
</script>
<style>
#infoBox1{display:inline;margin:10px 0 30px 10px;float:left;width:210px;}
#bigImg{background:url(http:/img.17k.com/images/readbook/bigImg.gif) no-repeat;width:198px;height:282px;padding:3px 0 0 3px;position:relative;}
#bigImg small{color:#fff;border:#f00 1px solid;background:url(http://img.17k.com/images/readbook/stamp.png);height:16px;padding:4px 7px 0;overflow:hidden;position:absolute;text-align:center;}
* html #bigImg small{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=http://img.17k.com/images/readbook/stamp.png,sizingMethod=scale);}
#bigImg small a{color:#fff;}
#bigImg img{width:189px;height:272px;}
</style>
</head>
<body>
<div id="infoBox1">
<div id="bigImg">
<div id="stamp">
<small style="left:15px;top:226px;" title="刘卿大师"><a href="#">刘卿大师</a></small>
<img src="http://changxiao.17k.com/images/bookcover/164/0/32940.jpg" />
</div>
</div>
<div id="info_bt">
<span id="bt_stamp" title="盖章"></span>
</div>
<div id="txtX"></div>
<div id="txtY"></div>
</div>
</body>
</html>
posted on
;height:16px;padding:4px){kind=link}
