鼠标左右晃动，文字和图片跟着晃动的视差效果_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

鼠标左右晃动，文字和图片跟着晃动的视差效果

来源：未知作者：类型：图文教程点击次数：发布时间：2015-09-28 14:09:16

在网上经常看到这种效果：鼠标在容器上移动，容器里面的图片、文字会向着鼠标相反方向做小幅度的位移，并且，同一个容器，有的移动的块，幅度大，有的小，其实很简单：
运行下面的代码，查看效果：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标左右晃动，文字和图片跟着晃动的视差效果 - 我爱模板网www.5imoban.net</title> <style> *{margin:0px; padding:0px;} div{background:#2454a6; width:500px; height:350px; position:relative; margin:0 auto;} img,span,p{position:absolute; color:#fff; font-family:"微软雅黑"; font-size:14px;} img{left:60px; top:0px;} span{left:60px; top:180px; font-size:14px; font-weight:bold;} p{left:50px; top:230px; width:350px; text-indent:2em} </style> </head> <body> <div id="sky"> <img src="http://www.5imoban.net/view/demoimg/cloud.png" /> <span>鼠标左右晃动，文字和图片跟着晃动的视差效果</span> <p>将鼠标移动到“天空”上，左右上下晃动，可以看到云层、标题和段落文字都向上下左右偏移！</p> </div> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script> $('#sky').on('mousemove', function(e) { //公式 var offsetX = e.clientX / window.innerWidth - 0.5, offsetY = e.clientY / window.innerHeight - 0.5; var _left = -40 * offsetX; //如果想动的幅度更大，可以调整 -40 的值 var _top = -40 * offsetY; //如果想动的幅度更大，可以调整 -40 的值 //应用公式 $('#sky img').css('left',60+_left*0.3).css('top',_top*0.3); //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小 $('#sky span').css('left',60+_left*3).css('top',180+_top*3); //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小 $('#sky p').css('left',50+_left*1.5).css('top',230+_top*1.5); //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小 }); </script> </body> </html>
提示：您可以先修改部分代码再运行

方法上面说的很清楚了，只要把调用的容器以及移动幅度的数值参数更改下即可。