jquery实现百叶窗效果
今天试着用jq写了下图片百叶窗效果,就是鼠标经过那张图,那张图显示,其他图片缩小~
十余年专注成都网站制作,企业网站制作,个人网站制作服务,为大家分享网站制作知识、方案,网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于企业网站制作,高端网页制作,对假山制作等多个方面,拥有丰富的网站推广经验。
最开始看效果的时候觉得好复杂,以为是宽度的变化写的动画,但是后来细想,如果是宽度变化,那么图片变窄的时候肯定会失真了,后来经过学习,发现原来原理很简单:
基本原理就是,将图片都绝对定位到盒子里,然后分别定位,平分整个盒子,图片就会显示一种层叠效果了(本案例是通过left值控制位置);然后通过jq控制,当鼠标经过某张图片的时候这张图片完全显示(即left值进行变化),其他图片的left值也进行相应的改变。
文字描述起来很难懂的样子,先上html和css布局效果
Document
布局很简单,接下来就是jq控制各个图片相对位置的变化了。
起始位置:五张图片的 left 值在css已经写好,就是平分了整个盒子的宽度;
鼠标经过时候:经过的那张图片完全显示,即占据宽度280px(图片的宽度是280px),剩余的宽度是 (盒子宽度-280px)/剩余的图片数量,根据所得值确定各个图片的终止位置,left值;
感觉自己说的好复杂,先看下鼠标讲过某张图的时候的动画效果:
Document
鼠标移出效果,就是恢复到最开始的状态,就不在叙述了。
方法可能不是最简单的方法,说的也可能不甚详尽,希望大神多多指教,我也多多学习~~~
ps: 图片不知道怎么加上来,稍后看下再改吧。欢迎各位加入交流学习前端群 466039913
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!
网站名称:jquery实现百叶窗效果
地址分享:http://pwwzsj.com/article/gjschg.html