html5中文学习网

您的位置: 首页?>?网站及特效实例?>?javascript特效 ? 正文

jquery实现百叶窗效果_jquery_

[ ] 已经帮助:人解决问题

今天试着用jq写了下图片百叶窗效果,就是鼠标经过那张图,那张图显示,其他图片缩小~xn7HTML5中文学习网 - HTML5先行者学习网

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

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

文字描述起来很难懂的样子,先上html和css布局效果xn7HTML5中文学习网 - HTML5先行者学习网

  Document

布局很简单,接下来就是jq控制各个图片相对位置的变化了。xn7HTML5中文学习网 - HTML5先行者学习网

起始位置:五张图片的 left 值在css已经写好,就是平分了整个盒子的宽度;xn7HTML5中文学习网 - HTML5先行者学习网

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

感觉自己说的好复杂,先看下鼠标讲过某张图的时候的动画效果:xn7HTML5中文学习网 - HTML5先行者学习网

  Document

鼠标移出效果,就是恢复到最开始的状态,就不在叙述了。xn7HTML5中文学习网 - HTML5先行者学习网

方法可能不是最简单的方法,说的也可能不甚详尽,希望大神多多指教,我也多多学习~~~xn7HTML5中文学习网 - HTML5先行者学习网

ps: 图片不知道怎么加上来,稍后看下再改吧。欢迎各位加入交流学习前端群 466039913xn7HTML5中文学习网 - HTML5先行者学习网

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

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助