新增第184个小实例：九宫格图片鼠标移入移出方向感知特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
f52a160122
commit
cee575521d
|
|
@ -191,6 +191,7 @@
|
|||
181. HTML5+CSS3+JS小实例：Canvas图片滑块拖动验证码
|
||||
182. HTML5+CSS3+JS小实例：霁青+翠蓝的Tabbar动画特效
|
||||
183. HTML5+CSS3+JS小实例：蜂巢里的小蜜蜂光标特效
|
||||
184. HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 方便演示 满屏居中 */
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(to top,#dfe9f3,#fff);
|
||||
}
|
||||
.container{
|
||||
width: 1220px;
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 260px;
|
||||
float: left;
|
||||
margin: 5px 10px 5px 0;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
li img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
/* 过渡效果 */
|
||||
transition: 0.25s ease-in;
|
||||
}
|
||||
li p{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.75);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
/* 默认移出可视范围 */
|
||||
top: -100%;
|
||||
font-size: 15px;
|
||||
color: #aaa;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
li:hover img{
|
||||
/* 悬停图片变大 */
|
||||
transform: scale(1.1);
|
||||
}
|
||||
li:nth-child(3){
|
||||
margin-right: 0;
|
||||
width: 400px;
|
||||
height: 530px;
|
||||
}
|
||||
li:nth-child(4),
|
||||
li:nth-child(5){
|
||||
margin-top: -265px;
|
||||
}
|
||||
li:nth-child(5){
|
||||
margin-left: 410px;
|
||||
}
|
||||
li:nth-child(8){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>九宫格图片鼠标移入移出方向感知特效</title>
|
||||
<link rel="stylesheet" href="184.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="container">
|
||||
<li>
|
||||
<img src="/images/184/1.jpg" alt="">
|
||||
<p>
|
||||
也许你永远都不会知道，你的一句话，我会记得很久；你的一个不以为然的承诺，我却苦苦守侯。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/images/184/2.jpg" alt="">
|
||||
<p>
|
||||
谁曾许诺予我一世长安，今只残阳孤帆背影为伴。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/images/184/8.jpg" alt="">
|
||||
<p>
|
||||
这城市总是风很大，孤独的人总是晚回家，外面不像你想的那么好，风雨都要自己挡，愿每个独自走夜路的你都足够坚强。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/images/184/3.jpg" alt="">
|
||||
<p>
|
||||
古之成大事者，不惟有超世之才，亦必有坚忍不拔之志。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/images/184/4.jpg" alt="">
|
||||
<p>
|
||||
轻易不动感情的人，一旦动情，就会地裂山崩，把自己燃烧成一堆灰烬，被他爱上的人，也会被这狼烟烈火烧烤得痛不欲生。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/images/184/5.jpg" alt="">
|
||||
<p>
|
||||
却怕长发及腰，少年倾心他人。待你青丝绾正，笑看君怀她笑颜。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/images/184/6.jpg" alt="">
|
||||
<p>
|
||||
这个社会就是靠实力和背景说话的，你没有强大的背景和实力是没有用的，这就是现实。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/images/184/7.jpg" alt="">
|
||||
<p>
|
||||
没有人规定你必须要长成玫瑰，你愿意的话，做雏菊，做茉莉，做无名小花，做千千万万。
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="184.js"></script>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
// 要操作的元素
|
||||
const lis=document.querySelectorAll('.container li'),
|
||||
ps=document.querySelectorAll('.container li p');
|
||||
|
||||
// 获取移入、移出的方向
|
||||
function direct(e,o){
|
||||
var w=o.offsetWidth,
|
||||
h=o.offsetHeight,
|
||||
top=o.offsetTop,
|
||||
left=o.offsetLeft,
|
||||
scrollTop=document.body.scrollTop||document.documentElement.scrollTop,
|
||||
scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft,
|
||||
offTop=top-scrollTop,
|
||||
offLeft=left-scrollLeft,
|
||||
ex=(e.pageX-scrollLeft)||e.clientX,
|
||||
ey=(e.pageY-scrollTop)||e.clientY,
|
||||
x=(ex-offLeft-w/2)*(w>h?(h/w):1),
|
||||
y=(ey-offTop-h/2)*(h>w?(w/h):1),
|
||||
angle=(Math.round((Math.atan2(y,x)*(180/Math.PI)+180)/90)+3)%4,
|
||||
directName=['上','右','下','左'];
|
||||
return directName[angle];
|
||||
}
|
||||
|
||||
// 鼠标事件（方向，元素，鼠标进入或离开）
|
||||
function mouseEvent(angle,o,d){
|
||||
var w=o.offsetWidth,
|
||||
h=o.offsetHeight;
|
||||
var p=o.querySelector('p'); //元素下的p元素
|
||||
p.style.transition='0s'; //默认无过渡效果
|
||||
if(d=='in'){ //鼠标进入
|
||||
// 判断方向
|
||||
switch(angle){
|
||||
case '上':
|
||||
if(p.offsetLeft==0&&p.offsetTop==0) break;
|
||||
p.style.left=0;
|
||||
p.style.top=-h+'px';
|
||||
setTimeout(() => {
|
||||
p.style.left=0;
|
||||
p.style.top=0;
|
||||
p.style.transition='0.2s';
|
||||
}, 50);
|
||||
break;
|
||||
case '右':
|
||||
if(p.offsetLeft==0&&p.offsetTop==0) break;
|
||||
p.style.left=w+'px';
|
||||
p.style.top=0;
|
||||
setTimeout(() => {
|
||||
p.style.left=0;
|
||||
p.style.top=0;
|
||||
p.style.transition='0.2s';
|
||||
}, 50);
|
||||
break;
|
||||
case '下':
|
||||
if(p.offsetLeft==0&&p.offsetTop==0) break;
|
||||
p.style.left=0;
|
||||
p.style.top=h+'px';
|
||||
setTimeout(() => {
|
||||
p.style.left=0;
|
||||
p.style.top=0;
|
||||
p.style.transition='0.2s';
|
||||
}, 50);
|
||||
break;
|
||||
case '左':
|
||||
if(p.offsetLeft==0&&p.offsetTop==0) break;
|
||||
p.style.left=-w+'px';
|
||||
p.style.top=0;
|
||||
setTimeout(() => {
|
||||
p.style.left=0;
|
||||
p.style.top=0;
|
||||
p.style.transition='0.2s';
|
||||
}, 50);
|
||||
break;
|
||||
}
|
||||
}else if(d=='out'){ //鼠标离开
|
||||
// 判断方向
|
||||
switch(angle){
|
||||
case '上':
|
||||
setTimeout(() => {
|
||||
p.style.left=0;
|
||||
p.style.top=-h+'px';
|
||||
p.style.transition='0.2s';
|
||||
p.style.transitionDelay='0.1s';
|
||||
}, 50);
|
||||
break;
|
||||
case '右':
|
||||
setTimeout(() => {
|
||||
p.style.left=w+'px';
|
||||
p.style.top=0;
|
||||
p.style.transition='0.2s';
|
||||
p.style.transitionDelay='0.1s';
|
||||
}, 50);
|
||||
break;
|
||||
case '下':
|
||||
setTimeout(() => {
|
||||
p.style.left=0;
|
||||
p.style.top=h+'px';
|
||||
p.style.transition='0.2s';
|
||||
p.style.transitionDelay='0.1s';
|
||||
}, 50);
|
||||
break;
|
||||
case '左':
|
||||
setTimeout(() => {
|
||||
p.style.left=-w+'px';
|
||||
p.style.top=0;
|
||||
p.style.transition='0.2s';
|
||||
p.style.transitionDelay='0.1s';
|
||||
}, 50);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
lis.forEach(li=>{
|
||||
li.addEventListener('mouseenter',function(e){
|
||||
var e=e||window.event;
|
||||
var angle=direct(e,this);
|
||||
mouseEvent(angle,this,'in');
|
||||
})
|
||||
li.addEventListener('mouseleave',function(e){
|
||||
var e=e||window.event;
|
||||
var angle=direct(e,this);
|
||||
mouseEvent(angle,this,'out');
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
也许你永远都不会知道，你的一句话，我会记得很久；你的一个不以为然的承诺，我却苦苦守侯。
|
||||
|
||||
谁曾许诺予我一世长安，今只残阳孤帆背影为伴。
|
||||
|
||||
这城市总是风很大，孤独的人总是晚回家，外面不像你想的那么好，风雨都要自己挡，愿每个独自走夜路的你都足够坚强。
|
||||
|
||||
古之成大事者，不惟有超世之才，亦必有坚忍不拔之志。
|
||||
|
||||
轻易不动感情的人，一旦动情，就会地裂山崩，把自己燃烧成一堆灰烬，被他爱上的人，也会被这狼烟烈火烧烤得痛不欲生。
|
||||
|
||||
却怕长发及腰，少年倾心他人。待你青丝绾正，笑看君怀她笑颜。
|
||||
|
||||
这个社会就是靠实力和背景说话的，你没有强大的背景和实力是没有用的，这就是现实。
|
||||
|
||||
没有人规定你必须要长成玫瑰，你愿意的话，做雏菊，做茉莉，做无名小花，做千千万万。
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
Loading…
Reference in New Issue