今天学习了jQuery的一些知识点，做了一个练习：实现蒙板随鼠标移动，从元素的四个方向滑入滑出。如图：
jQuery知识点：
定位：获取相对于父元素的偏移量
position().left
position().top
获取元素相对于当前窗口的偏移量
offset().left
offset().top
步骤：
1、创建父元素、当前对象、蒙板
代码如下：
<div class="wrap">
<div id="id01"></div>
<div class="mb"></div>
</div>
其中，类名与id名可随意更改，这里创建四组，如完整代码
2、进行样式编写
<style> body{ padding: 100px 200px; margin: 0; } .wrap{ position: relative; width: 102px; height: 102px; border: 1px solid purple; overflow: hidden; //将蒙板隐藏起来 float: left; margin: 100px 5px 0 5px; } #id01,#id02,#id03,#id04{ position: absolute; width: 100px; height: 100px; background: mediumpurple; margin:1px; } .mb{ width: 100px; height: 100px; background: black; opacity: 0.6; position: absolute; }</style>
3、蒙板随鼠标滑入
编写滑入函数slideIn()，代码如下
function slideIn(e){ var p_left=$(this).parent().offset().left; //获取父元素相对于浏览器的左侧距离 var p_top=$(this).parent().offset().top; //获取父元素相对于浏览器的上侧距离
var v_left=$(this).offset().left; //对象元素相对于当前窗口左侧偏移量 var v_top=$(this).offset().top; var v_width=$(this).width(); //当前元素的宽 var v_height=$(this).height();
var v_pleft=$(this).position().left; //当前元素相对于父元素的偏移量、左侧 var v_ptop=$(this).position().top;
/*获取鼠标当前位置坐标*/ var x= e.pageX; var y= e.pageY;
/*判断鼠标滑入元素的方向*/ if(x>v_left && x<v_left+v_width && (y<(v_top+v_height) && y>(v_top+v_height-3))){ //下进 $(this).next().css({left:v_pleft,top:(v_ptop+v_height)}); //初始进入位置 $(this).next().animate({top:v_top-p_top+"px"},500); //动画，0.5s移动到指定位置 } if(x>v_left && x<v_left+v_width && (y>v_top-3 && y<(v_top+3))){ //上进 $(this).next().css({left:v_pleft,top:(v_ptop-v_height)}); $(this).next().animate({top:v_ptop},500); } if(y>v_top && y<v_top+v_height && (x<(v_left+v_width+3) && x>(v_left+v_width-3))){ //右进 $(this).next().css({top:v_ptop,left:(v_pleft+v_width)}); $(this).next().animate({left:v_left-p_left+"px"},500); } if(y>v_top && y<v_top+v_height && (x>v_left-3 && x<(v_left+3))){ //左进 $(this).next().css({top:v_ptop,left:(v_pleft-v_width)}); $(this).next().animate({left:v_pleft},500); }
编写滑出函数slideOut()，代码如下
if(x>v_left && x<v_left+v_width && (y<(v_top+v_height+5) && y>(v_top+v_height-3))){ //下出 $(this).next().animate({top:v_ptop+v_height+p_top+"px"},500);}if(x>v_left && x<v_left+v_width && (y>v_top-5 && y<(v_top+3))){ //上出 $(this).next().animate({top:(v_ptop-v_height)},500);}if(y>v_top && y<v_top+v_height && (x<(v_left+v_width+5) && x>(v_left+v_width-3))){ //右出 $(this).next().animate({left:(v_pleft+v_width)},500);}if(y>v_top && y<v_top+v_height && (x>v_left-5 && x<(v_left+3))){ //左出 $(this).next().animate({left:(v_pleft-v_width)},500);}
将函数封装成js文件
4、调用函数
$(".mb").css({left:"100px",top:"100px"}); //蒙板初始位置，便于隐藏$("#id01").mouseover(slideIn);$("#id01").mouseout(slideOut);$("#id02").mouseover(slideIn);$("#id02").mouseout(slideOut);$("#id03").mouseover(slideIn);$("#id03").mouseout(slideOut);$("#id04").mouseover(slideIn);$("#id04").mouseout(slideOut);
HTML完整代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.2.js"></script> //引入jQuery包 <script src="js/jquery-slide-yw.js"></script> //引入封装函数包 <style> body{ padding: 100px 200px; margin: 0; } .wrap{ position: relative; width: 102px; height: 102px; border: 1px solid purple; overflow: hidden; float: left; margin: 100px 5px 0 5px; } #id01,#id02,#id03,#id04{ position: absolute; width: 100px; height: 100px; background: mediumpurple; margin:1px; } .mb{ width: 100px; height: 100px; background: black; opacity: 0.6; position: absolute; } </style> <script> $(function(){ $(".mb").css({left:"100px",top:"100px"}); $("#id01").mouseover(slideIn); $("#id01").mouseout(slideOut); $("#id02").mouseover(slideIn); $("#id02").mouseout(slideOut); $("#id03").mouseover(slideIn); $("#id03").mouseout(slideOut); $("#id04").mouseover(slideIn); $("#id04").mouseout(slideOut); }) </script></head><body><div class="wrap"> <div id="id01"></div> <div class="mb"></div></div><div class="wrap"> <div id="id02"></div> <div class="mb"></div></div><div class="wrap"> <div id="id03"></div> <div class="mb"></div></div><div class="wrap"> <div id="id04"></div> <div class="mb"></div></div></body></html>
时间： 2024-10-05 17:16:44