前段时间看了很多php后台代码，我真心觉得php的框架还是挺不错的，上手很快，模版语言也特别好，函数写法感觉像是java和js的混合体，有public和private，但是方法名却是function，我已经把route，model和controller的联系基本弄明白了，特别要说的是blade模版，真心比jade好用呀。。。好了，言归正传今天给大家带来一点干货吧。
1 背景图片随鼠标摆动
实现这个效果，应该怎么做，我来说一下我的思路：
- 监听鼠标移动onmousemove事件，获取每个时刻的坐标值。
- 通过animate更改图片的位置，每次方向发生改变动画停止，开启另一个。
思路有了，我们来看下如何实现把
我们准备了5张图片，在第五张图片上滑动式会有效果。
$(function(){
var positionX = 0;
var positionY = 0;
$('.pic5').mousemove(function(e) {
var x = e.clientX, y = e.clientY;
if(positionX === 0 && positionY === 0){
positionX = x;
positionY = y;
}
if(x > positionX && y < positionY){
$('.pic1').stop().animate({'left':10,'top':292},'800',"easeOutCubic");
$('.pic2').stop().animate({'right':449,'top':114},'800',"easeOutCubic");
$('.pic3').stop().animate({'left':375,'top':5},'800',"easeOutCubic");
$('.pic4').stop().animate({'left':-20,'top':300},'800',"easeOutCubic");
positionX = x;
positionY = y;
}else if(x > positionX && y > positionY){
$('.pic1').stop().animate({'left':-10,'top':280},'800',"easeOutCubic");
$('.pic2').stop().animate({'right':429,'top':104},'800',"easeOutCubic");
$('.pic3').stop().animate({'left':375,'top':-5},'800',"easeOutCubic");
$('.pic4').stop().animate({'left':-20,'top':278},'800',"easeOutCubic");
positionX = x;
positionY = y;
}else if(x < positionX && y < positionY){
$('.pic1').stop().animate({'left':10,'top':292},'800',"easeOutCubic");
$('.pic2').stop().animate({'right':449,'top':114},'800',"easeOutCubic");
$('.pic3').stop().animate({'left':385,'top':5},'800',"easeOutCubic");
$('.pic4').stop().animate({'left':20,'top':300},'800',"easeOutCubic");
positionX = x;
positionY = y;
}else if(x < positionX && y > positionY){
$('.pic1').stop().animate({'left':-10,'top':280},'800',"easeOutCubic");
$('.pic2').stop().animate({'right':429,'top':104},'800',"easeOutCubic");
$('.pic3').stop().animate({'left':385,'top':-5},'800',"easeOutCubic");
$('.pic4').stop().animate({'left':20,'top':278},'800',"easeOutCubic");
positionX = x;
positionY = y;
}
})
$.extend($.easing,{
easeOutBack:function(x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
});
})
看到这段代码，我们可以看出四种不同的方位移动都会造成4张图不一样的animate效果，在这里用到stop是停止上次执行。
2 原生js的放大镜
放大镜效果得准备2张图片，一个放小图片，一个放高清的大图片，在小图片上移动时，大图片的background-position需要作出变化。
- 鼠标放上去的时候，大图片才显示出来。
- 小图片上需要一个遮罩，跟随鼠标移动。
- 每次移动时，计算坐标，控制大图的background-position。
wrapper里面放的就是大图片，在css里面是通过background-position控制背景图片的位置。
var container = document.querySelector('.container')
var mirror = document.querySelector('.mirror')
var wrapper = document.querySelector('.wrapper')
container.onmouseover = function(){
mirror.style.display = 'block';
document.onmousemove = function(e){
var x = e.clientX - container.offsetLeft - mirror.offsetWidth/2;
var y = e.clientY - container.offsetTop - mirror.offsetHeight/2;
var maxLeft = container.offsetWidth - mirror.offsetWidth;
var maxTop = container.offsetHeight - mirror.offsetHeight;
if(x < 0){
x = 0
}
if(y < 0){
y = 0
}
if(x > maxLeft){
x = maxLeft
}
if(y > maxTop){
y = maxTop
}
var xRatio = -x/maxLeft*830
var yRatio = -x/maxTop*430
mirror.style.left = x + 'px'
mirror.style.top = y + 'px'
wrapper.style.backgroundPosition = ''+ xRatio + 'px ' + yRatio + 'px'
}
}
container.onmouseout = function(){
mirror.style.display = 'none'
}
一个放大镜就是这么简单。
3 自定义右键菜单
我们在网页里面右键点击，会弹出原始的右键菜单，我们来实现一个自定义的菜单。
js代码：
window.onload=function(){
var forRight=document.getElementById("testRight");//获取对象，现在太熟悉了
forRight.style.display="none";
var title=forRight.getElementsByTagName("li");
for(var i=0;i好了，今天就给大家带来这些，很久没写python了，之后我会写一起python爬虫的。。。