鼠标移动效果AR成功案例

收藏

鼠标移动改变元素位置，鼠标向右，图片向中间小幅移动，鼠标向左，图片分开

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 0 积分

<!--  内容区开始  -->
		<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);

			});

		});

		

	}

	

}