新网创想网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了jquery怎样实现百叶窗效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站专注于蛟河企业网站建设,响应式网站设计,商城开发。蛟河网站建设公司,为蛟河等地区提供建站服务。全流程按需搭建网站,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务
最开始看效果的时候觉得好复杂,以为是宽度的变化写的动画,但是后来细想,如果是宽度变化,那么图片变窄的时候肯定会失真了,后来经过学习,发现原来原理很简单:
基本原理就是,将图片都绝对定位到盒子里,然后分别定位,平分整个盒子,图片就会显示一种层叠效果了(本案例是通过left值控制位置);然后通过jq控制,当鼠标经过某张图片的时候这张图片完全显示(即left值进行变化),其他图片的left值也进行相应的改变。
文字描述起来很难懂的样子,先上html和css布局效果
Document
布局很简单,接下来就是jq控制各个图片相对位置的变化了。
起始位置:五张图片的 left 值在css已经写好,就是平分了整个盒子的宽度;
鼠标经过时候:经过的那张图片完全显示,即占据宽度280px(图片的宽度是280px),剩余的宽度是 (盒子宽度-280px)/剩余的图片数量,根据所得值确定各个图片的终止位置,left值;
感觉自己说的好复杂,先看下鼠标讲过某张图的时候的动画效果:
Document
感谢你能够认真阅读完这篇文章,希望小编分享的“jquery怎样实现百叶窗效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!