demo地址:https://download.csdn.net/download/hhy1006894859/10850963
html代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/imgslide.css">
<title>图片滑动的插件</title>
</head>
<body>
<div class="imgwrap">
<img src="../images/1.jpg" alt="">
<span class="content">1</span>
</div>
<div class="imgwrap">
<img src="../images/2.jpg" alt="">
<span class="content">2</span>
</div>
<div class="imgwrap">
<img src="../images/3.png" alt="">
<span class="content">3</span>
</div>
<div class="imgwrap">
<img src="../images/4.jpg" alt="">
<span class="content">4</span>
</div>
<div class="imgwrap">
<img src="../images/2.jpg" alt="">
<span class="content">2</span>
</div>
<div class="imgwrap">
<img src="../images/3.png" alt="">
<span class="content">3</span>
</div>
<div class="imgwrap">
<img src="../images/1.jpg" alt="">
<span class="content">1</span>
</div>
<div class="imgwrap">
<img src="../images/4.jpg" alt="">
<span class="content">4</span>
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/imgslide.js"></script>
<script>
imgSlide({
"father":"imgwrap",// 父元素的class值
"son":"content",// 子元素的class值
"time":100,// 动画时间
})
</script>
css代码:(sass)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
.imgwrap {
border: 1px red solid;
float: left;
position: relative;
//margin-left: 200px;
//margin-top: 200px;
overflow: hidden;
img {
display: block;
height: 300px;
}
.content {
display: block;
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
position: absolute;
//top: auto;
//right: -100%;
//bottom: 0;
//left: auto;
background: rgba(0,0,0,0.5);
color: #ffffff;
//display: none;
}
}
}
js代码:(插件代码)
// 判断鼠标进入div的方向的方法(js代码)
function direction(obj,e,status) {
/* 以矩形中心为原点,水平向右x正方向,竖直向上y正方向建立坐标系
* obj:触发事件的对象
* e:所触发的事件的时间对象
* status:回调函数返回方向 0:上,1:右,2:下,3:左
* w:矩形的宽度 h:矩形的高度
* x:目标点的x坐标 y:目标点的y坐标
* dot: 目标点相对原点坐标的斜率
* k1:矩形对角线的斜率
* k2:矩形另外一条对角线的斜率
* */
var w = obj.offsetWidth;// 框的宽度;
var h = obj.offsetHeight;// 框的高度;
var x = e.clientX - obj.offsetLeft - (w / 2);
var y = -(e.clientY - obj.offsetTop - (h / 2));
var k1 = h/w;// 获得矩形对角线的斜率
var k2 = -k1;// 另外一条对角线的斜率
var dot = y/x;// 获得该点的斜率
var dirArr = [
{"index":0,"data":"上"},
{"index":1,"data":"右"},
{"index":2,"data":"下"},
{"index":3,"data":"左"}
];// 分别代表上、右、下、左
if( dot <= k1 && dot >= k2 ) {
return x >= 0?status(dirArr[1]):status(dirArr[3])
}else {
return y >= 0?status(dirArr[0]):status(dirArr[2])
}
}
// 确定要进入或者离开容器动画的元素的初始位置
function initAnimateDomPos(fatherDom,dom,dir,isShow,flag,callback) {
/* 用来确定进入容器动画的元素的初始位置
* fatherDom:动画元素的父元素
* dom:动画元素
* dir:鼠标活动方向
* isShow:动画元素是显示还是隐藏
* flag:1进入 2:离开
* callback:回调函数,返回动画元素的宽度
* */
var h_box = fatherDom.offsetHeight;// 获得进行动画元素的父级容器的高度
var w_box = fatherDom.offsetWidth;// 获得进行动画元素的父级容器的宽度
var h = null;// 获得进行动画元素的高度
var w = null;// 获得进行动画元素的宽度
if(isShow) {
// 动画元素是显示的
h = dom.offsetHeight;
w = dom.offsetWidth;
}else {
dom.style.display = "block";
h = dom.offsetHeight;
w = dom.offsetWidth;
dom.style.display = "none";
}
// js获取非行内的css样式
var borderTopWidth = parseInt(window.getComputedStyle(fatherDom).borderTopWidth);
var borderBottomWidth = parseInt(window.getComputedStyle(fatherDom).borderBottomWidth);
var top = h_box - h - borderTopWidth - borderBottomWidth;// 绝对定位的top值
if(dir == 0) {
// 从上
dom.style.left = 0;
dom.style.right = "auto";
dom.style.bottom = "auto";
dom.style.top = top + "px";
callback();
}else if(dir == 1) {
// 从右
dom.style.left = "auto";
dom.style.bottom = 0;
dom.style.top = "auto"
if(flag == 1) {
//划入
dom.style.right = -w + "px";
callback();
}else if(flag == 2) {
// 划出
dom.style.right = 0;
callback(w)
}
}else if(dir == 2) {
// 从下
dom.style.left = 0;
dom.style.right = "auto";
dom.style.top = "auto"
dom.style.bottom = 0;
callback();
}else if(dir == 3) {
// 从左
dom.style.right = "auto";
dom.style.bottom = 0;
dom.style.top = "auto"
if(flag == 1) {
//划入
dom.style.left = -w + "px";
callback();
}else if(flag == 2) {
// 划出
dom.style.left = 0;
callback(w)
}
}
}
// 根据进入方向执行不同的动画的方法
function animateFun(fatherDom,dom,dir,flag,animateDomJq,time) {
/* 用来确定进入容器动画的元素的初始位置
* fatherDom:动画元素的父元素
* dom:动画元素
* dir:鼠标活动方向
* flag:1进入 2:离开
* animateDomJq:jq获取的动画元素
* time:动画的持续时间 单位:ms
* */
var isShow = flag == 1?false:flag == 2?true:null;//isShow:动画元素是显示还是隐藏
initAnimateDomPos(fatherDom,dom,dir,isShow,flag,function (width) {
if(dir == 0) {
// 从上
if(flag == 1) {
// 进入
animateDomJq.stop(true,true).slideDown(time)
}else if(flag == 2) {
// 离开
animateDomJq.stop(true,true).slideUp(time)
}
}else if(dir == 1) {
// 从右
if(flag == 1) {
// 进入
dom.style.display = "block"
animateDomJq.stop(true,true).animate({
"right":0
},time)
}else if(flag == 2) {
// 离开
animateDomJq.stop(true,true).animate({
"right":-width + "px",
},time,function () {
animateDomJq.hide();
})
}
}else if(dir == 2) {
// 从下
if(flag == 1) {
// 进入
animateDomJq.stop(true,true).slideDown(time)
}else if(flag == 2) {
// 离开
animateDomJq.stop(true,true).slideUp(time)
}
}else if(dir == 3) {
// 从左
if(flag == 1) {
// 进入
dom.style.display = "block"
animateDomJq.stop(true,true).animate({
"left":0
},time)
}else if (flag == 2) {
// 离开
animateDomJq.stop(true,true).animate({
"left":-width + "px"
},time,function () {
animateDomJq.hide();
})
}
}
})
}
// 鼠标移入和移出调用的方法
function enterOrLeave(e,fatherJq,domClass,flag,time) {
/*
* e:事件对象
* fatherJq:jquery获得的父元素
* domClass:动画元素的class属性值
* flag:1:进入,2:离开
* time:动画时间
* */
var _this = fatherJq[0];// 获得该元素(动画元素的父元素)
var animateDom = fatherJq.find("."+domClass)[0];// 获得该元素中的动画元素
var animateDomJq = fatherJq.find("."+domClass);// 获得该元素中的动画元素
direction(_this,e,function (res) {
animateFun(_this,animateDom,res.index,flag,animateDomJq,time)
})
}
var imgSlide = function (obj) {
$("body").on("mouseenter","."+obj.father,function (e) {
enterOrLeave(e,$(this),obj.son,1,obj.time)
})
$("body").on("mouseleave","."+obj.father,function (e) {
enterOrLeave(e,$(this),obj.son,2,obj.time)
})
}
调用该插件的代码:
imgSlide({
"father":"imgwrap",// 父元素的class值
"son":"content",// 子元素的class值
"time":100,// 动画时间
})