前段时间看了很多php后台代码，我真心觉得php的框架还是挺不错的，上手很快，模版语言也特别好，函数写法感觉像是java和js的混合体，有public和private，但是方法名却是function，我已经把route，model和controller的联系基本弄明白了，特别要说的是blade模版，真心比jade好用呀。。。好了，言归正传今天给大家带来一点干货吧。
1 背景图片随鼠标摆动
实现这个效果，应该怎么做，我来说一下我的思路：
- 监听鼠标移动onmousemove事件，获取每个时刻的坐标值。
- 通过animate更改图片的位置，每次方向发生改变动画停止，开启另一个。
思路有了，我们来看下如何实现把
<style type="text/css">
.top{position: absolute;width: 1920px;left: 50%;margin-left: -960px;height: 582px;overflow: hidden;}
.box{position: relative;width: 1000px;height: 582px;overflow: hidden;margin:0 auto;background:#ff6a00;}
.pic1{width: 1000px;height: 300px;position: absolute;left: 0;top: 282px;z-index: 114;}
.pic2{width: 1022px;height: 473px;position: absolute;right: 439px;top: 109px;z-index: 113;}
.pic3{width: 928px;height: 582px;position: absolute;left: 380px;top: 0;z-index: 112;}
img{vertical-align: top;}
.pic4{width: 1000px;height: 300px;position: absolute;left: 0;top: 282px;z-index: 113;}
.pic5{width: 1000px;height: 300px;position: absolute;left: 0;top: 282px;z-index: 999;}
.main{width: 1000px;margin: 0 auto;position: relative;}
</style>
<div class="top">
<div class="pic2" >
</div>
<div class="pic3">
</div>
</div>
<div class="main">
<div class="box">
<div class="pic1">
</div>
<div class="pic4">
</div>
<div class="pic5">
</div>
</div>
</div>
我们准备了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。
<style>
.container{position: relative;margin: 20px auto;width:200px;height: 200px;border: 1px solid cadetblue;display: inline-block}
.mirror{position: absolute;width:60px;height:60px;background: chocolate;display: none}
.wrapper{width: 120px;height: 120px;background-image:url("qwe.jpg");background-size:auto auto;display: inline-block}
</style>
<body>
<div class="container">
<div class="mirror"></div>
</div>
<div class="wrapper">
</div>
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 自定义右键菜单
我们在网页里面右键点击，会弹出原始的右键菜单，我们来实现一个自定义的菜单。
<style>
.active{color:blue;background: orange}
</style>
<ul id="testRight" style="width: 100px;background-color: yellow;position: absolute;z-index: 100;">
<li><a href="#">开始</a></li>
<li><a href="#">暂停</a></li>
<li><a href="#">拜拜</a></li>
</ul>
js代码：
window.onload=function(){
var forRight=document.getElementById("testRight");//获取对象，现在太熟悉了
forRight.style.display="none";
var title=forRight.getElementsByTagName("li");
for(var i=0;i<title.length;i++){
title[i].onmouseover=function(){
this.classname="active";//其实这里我们也可以调用其他事件吧
};
title[i].onmouseout=function(){//这里也是鼠标的两个事件吧
this.classname="";
};
}
document.oncontextmenu=function(event){//这是实现的关键点
var event=event||window.event;//这个都不是问题了吧
forRight.style.display="block";
forRight.style.left=event.clientX+"px";
forRight.style.top=event.clientY+"px";//鼠标的坐标啊
return false;//这里返回false就是为了屏蔽默认事件
};
document.onclick=function(){//就是为了更形象的模仿啊
forRight.style.display="none";
};
};
好了，今天就给大家带来这些，很久没写python了，之后我会写一起python爬虫的。。。
