鼠标移动效果AR成功案例

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

<!--  内容区开始  -->
		<main role="main">
			 <div class="main_div1">
			 	<div class="banner_page cf">
					
				    <img src="img/anli_left.png" width="135" height="82" class="img_page" id="js_img_page" style="margin-top:10px;margin-left: -140px;" />
				
				    <img src="img/anli_right.png" width="135" height="82" class="img_page img_page_2" id="js_img_page_2" style="margin-left:-60px;margin-top: 10px;" />

				</div>
			 	
			 </div>
						 
		</main>
	<!--  内容区结束  -->

$(document).ready(function(e) {



	//banner鼠标移动效果


	xlc.changePosition("#js_img_page",{x:20,y:0});

	xlc.changePosition("#js_img_page_2",{x:-20,y:0});

});


var xlc = {

	//鼠标移动改变元素位置

	changePosition : function (para , Range) {

		var mousex;

		var mousey;

		

		$(para).each(function(){

			var para = $(this);

			var left = parseInt(para.css("marginLeft")) || 0;

			var top = parseInt(para.css("top")) || 0;

			

			$("body").mousemove(function(e) {

				var e = e || window.event;

				var mousex = e.clientX - $(window).width()/2 + document.body.scrollLeft + document.documentElement.scrollLeft ;

				var mousey = e.clientY + document.body.scrollTop + document.documentElement.scrollTop ;



				var newLeft = (mousex - left- 100) / Range.x + left;

				var newTop = (mousey - top) / Range.y + top

				para.css({

					"marginLeft" : newLeft,

					"top" : newTop

				},20);

			});

		});

		

	}

	

}