铁雪资源网 Design By www.gsvan.com

今天试着用jq写了下图片百叶窗效果,就是鼠标经过那张图,那张图显示,其他图片缩小~

最开始看效果的时候觉得好复杂,以为是宽度的变化写的动画,但是后来细想,如果是宽度变化,那么图片变窄的时候肯定会失真了,后来经过学习,发现原来原理很简单:

基本原理就是,将图片都绝对定位到盒子里,然后分别定位,平分整个盒子,图片就会显示一种层叠效果了(本案例是通过left值控制位置);然后通过jq控制,当鼠标经过某张图片的时候这张图片完全显示(即left值进行变化),其他图片的left值也进行相应的改变。

文字描述起来很难懂的样子,先上html和css布局效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="/UploadFiles/2021-04-02/17.jpg">

布局很简单,接下来就是jq控制各个图片相对位置的变化了。

起始位置:五张图片的 left 值在css已经写好,就是平分了整个盒子的宽度;

鼠标经过时候:经过的那张图片完全显示,即占据宽度280px(图片的宽度是280px),剩余的宽度是  (盒子宽度-280px)/剩余的图片数量,根据所得值确定各个图片的终止位置,left值;

感觉自己说的好复杂,先看下鼠标讲过某张图的时候的动画效果:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="/UploadFiles/2021-04-02/17.jpg">

当前图片能够愉快的玩耍了,接下来的重点就是其余图片怎么运动。

此时,我们可以把剩余的图片分成左右两部分,用jq 的  ":lt()" 和 ":gt()"方法写出剩余部分的效果。这里有一个小小的坑,自己也是绕了半天,最后还是别人提醒的才绕出来。

以当前图片左侧动画效果为例,最开始我是这么写的

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="/UploadFiles/2021-04-02/17.jpg">

看上去没有什么错误,见证奇迹~~~奇迹~~迹~~~然而并没有什么奇迹,原因就是  $(“img:lt( idx )“) 这种写法,里面的idx已经不是变量了,所以无法获取当前的 idx 值,我们可以在外面定义一个变量,同时用 + 连接 lt 和变量 idx,再把变量引入进去即可。

因此更改后如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="/UploadFiles/2021-04-02/17.jpg">

这样奇迹就出现了~~ 同样的道理,右侧也是同样的方法。

最终代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 width:280px;
 height:186px;
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="/UploadFiles/2021-04-02/17.jpg">

鼠标移出效果,就是恢复到最开始的状态,就不在叙述了。

方法可能不是最简单的方法,说的也可能不甚详尽,希望大神多多指教,我也多多学习~~~

ps: 图片不知道怎么加上来,稍后看下再改吧。欢迎各位加入交流学习前端群 466039913

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

标签:
jquery,百叶窗

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“jquery实现百叶窗效果”

暂无jquery实现百叶窗效果的评论...