javascript - 如何做出这种幻灯片凸显的效果?是用到了bootstrap吗?
伊谢尔伦
伊谢尔伦 2017-04-11 13:15:29
0
9
297


这种凸显的效果怎么实现的?

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回覆(9)
Peter_Zhu

科普时间~

  1. bootstrap不是一门技术, 这么说很外行. 多多少少是个程序员了, 不要被人笑话.

  2. 能用bootstrap写出来的, 用css + js一定能写出来, 反之不成立.

  3. 这个效果纯css就能写出来, 当然, 用js会更方便一些. 怎么写? 搜轮播图即可, 看起来不一样, 实质都是一样的

左手右手慢动作

如果想要现成的,搜索swiper

刘奇

前段时间看过一个jquery插件的实现 http://www.softwhy.com/demo/c...

https://github.com/LikaiLee/C...

凸显的实现原理也不复杂,就是绝对定位+z-index。

左手右手慢动作

请百度 swiper

PHPzhong

http://www.swiper.com.cn/api/...
拿走不谢

洪涛

http://www.swiper.com.cn/api/...
你要的效果,调整角度即可...

大家讲道理

这个不需要什么其他框架,基础的js+css就可以做到。
层叠的实现大致通过zindex控制前后层次,scale缩放大小,再加一些position进行定位。
js做一些控制效果,控制translateX等位置属性改变位置,变换大小等等。
建议楼主自己多思考一下,然后不依靠插件直接自己写。写个demo后面在和网上的去对比下,不断丰富效果。

大家讲道理

swiper.js
就可以了

小葫芦

试着用js+css自己写一个吧。

scale、opacity、transform、transition等css属性可以完成

另外,transitionEnd事件也可以调查下

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!