大体思路:
'定义一个放大图层
<div id='otherlayer' style=''><IMG id='enlargedpic' src='' height=500 width=500></div>
'实际显示图部分
<div>
<img src='picjpg' onmouseover='javascript:showbigpic(1);' onmouseout='showbigpic(0);'>
</div>
'鼠标经过时触发的事件处理
showbigpic(id)
{
var infoDiv = documentgetElementById('otherlayer');
if(idx==1){
documentgetElementsByName("'enlargedpic'")[0]src = pic;
infoDivstylevisibility = "visible";
} else{
infoDivstylevisibility = "hidden";
}
}
在桌面空白处右击，选择个性化。
找到主题这一项，选择鼠标光标。
选择浏览，把准备好的（需提前将转换成cur图标文件）选中即可。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
border: solid red 1px;
}
#mdiv{
width: 171px;
height: 134px;
line-height: 134px;
background: url("6jpg") no-repeat;
text-align: center;
}
#mspan{
display: none;
}
</style>
</head>
<body>
<div id="mdiv"><span id="mspan">内容</span></div>
<script src="jquery-211minjs"></script>
<script>
var div = $('#mdiv')
var isFirst = true;
divclick(function(){
if(isFirst){
isFirst = false;
divcss({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(90deg)", "-webkitTransition":"all 06s"});
setTimeout(function(){
$('#mspan')show();
$('#mspan')css({'transform':'rotateY(180deg)','display':'block'});
divcss('background','none')
},700);
setTimeout(function(){
divcss({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(180deg)", "-webkitTransition":"all 06s"});
},800);
}
});
</script>
</body>
</html>
欢迎分享，转载请注明来源：浪漫分享网
微信扫一扫
支付宝扫一扫
评论列表（0条）