做有态度的前端团队

网易FEG前端团队

页面随鼠标位置而移动~

一个简单的交互,页面区块随鼠标移动而移动。

页面效果(第二屏):http://test.nie.163.com/test_html/game.academy/open-day/201612/

1.重温screenX、clientX、pageX 的区别

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。

pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动

demo1.png

2.pageX 小demo

小demo链接:http://test.nie.163.com/test_html/test/loading/page.html

鼠标滑过小图时则出现大图,而大图跟随鼠标在小图区域内移动而移动。
核心代码

var myX = e.pageX + 10;
var myY = e.pageY + 10;

  

3.回到页面最开始说的交互

 var wrap = $(".slide-wrap");
 var slideCon = wrap.find(".slide-con");
 var items = wrap.find("li");//400
 var conW = items.eq(0).outerWidth(true)*items.length;//2000
 var wrapW = $(".slide-wrap").width();
 var ratio = (conW-wrapW)/wrapW;

 function doMath(){
     conW = items.eq(0).outerWidth(true)*items.length;//2000
     wrapW = $(".slide-wrap").width();//窗口宽度
     ratio = (conW-wrapW)/wrapW;
 }

//浏览器宽度
 function renderCon(){
    slideCon.css({
        width:conW
    });
 }

//页面偏移量
function updatePos(x){
    slideCon.css({
         "marginLeft":-x*ratio
   })
}

$(".slide-wrap").on("mousemove",function(e){
    updatePos(e.clientX);//获取鼠标位置
});

//重置
$(window).bind("resize",function(){
     doMath();
     renderCon();
})

手机阅读请扫描下方二维码:

none
上一篇:移动分页实现   下一篇:游戏内嵌项目小结