鼠标感应图片旋转展示特效，像一个花圈伸缩显示效果，可根据自己的需求来自定义背景图片及旋转速度。
<!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=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>鼠标感应图片旋转显示特效_武鸣人</title>
<style type="text/css">
<!--
body{
margin:0px;
padding:0px;
}
body,td{
font-size:9pt;
}
.numRect{
font-family : 'Verdana';
font-weight : bolder;
color : #CC0000;
position : absolute;
width : 40px;
height : 40px;
text-align : center;
line-height : 38px;
cursor : pointer;
display : block;
background : url('/img/20240317_www_wuming_ren_2.png');
background-repeat : no-repeat;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/img/20240317_www_wuming_ren_2.png");
_background : none;
}
.showOut{
font-size : 14px;
}
.showIn{
font-size : 16pt;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload = function(){
var testDiv = document.getElementById('testDiv');
numRect = {
domList : [
document.getElementById('numDiv1'),
document.getElementById('numDiv2'),
document.getElementById('numDiv3'),
document.getElementById('numDiv4'),
document.getElementById('numDiv5'),
document.getElementById('numDiv6'),
document.getElementById('numDiv7'),
document.getElementById('numDiv8'),
document.getElementById('numDiv9'),
document.getElementById('numDiv10')
],
circle : {
x : 400, // 圆心X轴坐标 400
y : 260, // 圆心Y轴坐标 260
r : 80, // 半径
angle : 0, // 已经旋转了多少角度
step : 1, // 一次旋转多少角度
oldStep : 1, //
circumgyrateTimeLine : null
},
init : function(){
var domListLength = this.domList.length;
for(var i=0;i<domListLength;i++){
this.domList[i].style.left = this.circle.x+'px';
this.domList[i].style.top = this.circle.y+'px';
this.domList[i].onmouseover = function(){
this.className = 'numRect showIn';
numRect.circle.oldStep = numRect.circle.step;
numRect.circle.step = 0;
};
this.domList[i].onmouseout = function(){
this.className = 'numRect showOut';
numRect.circle.step = numRect.circle.oldStep;
};
this.domList[i].onmousedown = function(){
testDiv.innerHTML += this.innerHTML;
};
this.domList[i].onmouseup = function(){
this.className = 'numRect showIn';
};
}
this.initAngle();
},
initAngle : function(){
var domListLength = this.domList.length;
var baseAngle = 360/domListLength; // 基础角度
for(var i=0;i<domListLength;i++){
// 宽度＝ Math.round(半径*Math.sin(2*Math.PI/360*角度))
// 高度＝ Math.round(半径*Math.cos(2*Math.PI/360*角度))
var mp = 2*Math.PI/360; // 基础弧度
var left = Math.round(this.circle.r*Math.sin(mp*(i*baseAngle+this.circle.angle)))+this.circle.x;
var top = Math.round(this.circle.r*Math.cos(mp*(i*baseAngle+this.circle.angle)))+this.circle.y;
this.domList[i].style.left = left+'px';
this.domList[i].style.top = top+'px';
}
this.circumgyrate();
},
circumgyrate : function(){
this.circle.circumgyrateTimeLine = setTimeout(function(){
numRect.circumgyrateOnce();
}, 4);
},
/**
* <b>旋转函数（一次）</b>
* @param angle 要旋转的角度
*/
circumgyrateOnce : function(){
numRect.circle.angle += numRect.circle.step;
var domListLength = this.domList.length;
var baseAngle = 360/domListLength; // 基础角度
for(var i=0;i<domListLength;i++){
// 宽度＝ Math.round(半径*Math.sin(2*Math.PI/360*角度))
// 高度＝ Math.round(半径*Math.cos(2*Math.PI/360*角度))
var mp = 2*Math.PI/360; // 基础弧度
var left = Math.round(this.circle.r*Math.sin(mp*(i*baseAngle+numRect.circle.angle)))+this.circle.x;
var top = Math.round(this.circle.r*Math.cos(mp*(i*baseAngle+numRect.circle.angle)))+this.circle.y;
this.domList[i].style.left = left+'px';
this.domList[i].style.top = top+'px';
}
clearTimeout(this.circle.circumgyrateTimeLine);
this.circle.circumgyrateTimeLine = setTimeout(function(){
numRect.circumgyrateOnce();
}, 4);
}
}
document.body.onmousemove = function(event){
var e = window.event || event;
var x = e.x || e.clientX;
var y = e.y || e.clientY;
getDiagonal(x,y);
//alert();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/**
* 取得斜线长度
*/
function getDiagonal(x, y){
var width = Math.abs(x-numRect.circle.x);
var height = Math.abs(y-numRect.circle.y);
var length = Math.sqrt(width*width+height*height); // 鼠标与圆心的距离
if(length<=(numRect.circle.r+30)){ // 鼠标在圆内
numRect.circle.step = 0;
}else{
var step = length/150;
numRect.circle.step = step*2;
numRect.circle.r = step * 100;
}
}
numRect.init();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
</head>
<!--把<body>改为-->
<body onselectstart="return false;" height="100%">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="backgroundDiv" style="height:600px;background-color:#f1f1f1">
<div id="testDiv" style="font-size:20pt;font-family:Verdana"></div>
</div>
<div id="numDiv1" name="1" class="numRect showOut">1</div>
<div id="numDiv2" name="2" class="numRect showOut">2</div>
<div id="numDiv3" name="3" class="numRect showOut">3</div>
<div id="numDiv4" name="4" class="numRect showOut">4</div>
<div id="numDiv5" name="5" class="numRect showOut">5</div>
<div id="numDiv6" name="6" class="numRect showOut">6</div>
<div id="numDiv7" name="7" class="numRect showOut">7</div>
<div id="numDiv8" name="8" class="numRect showOut">8</div>
<div id="numDiv9" name="9" class="numRect showOut">9</div>
<div id="numDiv10" name="0" class="numRect showOut">0</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处