jq眼睛随鼠标旋转js代码

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jq眼睛随鼠标旋转js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

jq眼睛随鼠标旋转js代码

HTML代码(index.html):

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>jquery�۾��������ת��Ч</title>
    <script id="jquery_183" type="text/javascript" class="library" src="js/jquery-1.8.3.min.js">
    </script>
</head>
<body>
<div class='content'>
<p style='text-align:center;'>
<div class='eye_wrapper' id='eyeballs'>
<img alt="Head" class="head" src="images/head.png" style="width:141px;margin:20px auto;" />
<img alt="Ball" class="eye-left" id="eye_left" src="images/ball.png" />
<img alt="Ball" class="eye-right" id="eye_right" src="images/ball.png" />
</div>
</p>
</div>
</div>
<style>.eye_wrapper{
	width:141px;
	height:185px;
	margin:80px auto;
	position:relative;
}.eye_wrapper .head{
	z-index:1px}
.eye_wrapper .eye-left{
	position:absolute;
	top:82px;
	left:30px}
.eye_wrapper .eye-right{
	position:absolute;
	top:80px;
	left:96px}</style>
	    		<script>var getAngle = function(Xc, Yc, Xa, Ya, Xb, Yb) {
	var v1x = Xb - Xc;
	var v1y = Yb - Yc;
	var v2x = Xa - Xc;
	var v2y = Ya - Yc;
	return 180 * (Math.atan2(v1x, v1y) - Math.atan2(v2x, v2y)) / Math.PI
};
var left_center_offset = {
	left: 30,
	top: 82
},
right_center_offset = {
	left: 96,
	top: 80
},
radius = 10;
var setEyeOffset = function(event) {
	var offset = $(".eye_wrapper").offset();
	var x1 = offset.left + left_center_offset.left;
	var y1 = offset.top + left_center_offset.top;
	var x2 = offset.left + right_center_offset.left;
	var y2 = offset.top + right_center_offset.top;
	var n1 = event.clientX - x1;
	var m1 = -(event.clientY - y1);
	var k1 = Math.atan2(m1, n1);
	var n2 = event.clientX - x2;
	var m2 = -(event.clientY - y2);
	var k2 = Math.atan2(m2, n2);
	var x11 = (Math.cos(k1) * radius + x1).toFixed(0);
	var y11 = (( - Math.sin(k1) * radius) + y1).toFixed(0);
	$(".eye-left").offset({
		left: x11,
		top: y11
	});
	var x22 = (Math.cos(k2) * radius + x2).toFixed(0);
	var y22 = (( - Math.sin(k2) * radius) + y2).toFixed(0);
	$(".eye-right").offset({
		left: x22,
		top: y22
	})
};
$(window).mousemove(setEyeOffset);</script>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
48.69 KB
jquery特效9
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章