请选择 进入手机版 | 继续访问电脑版

网页UI--3D爆炸焦点图

发表于 2017-05-27 15:48 显示全部楼层 47 1434

本帖最后由 赵延明老师 于 2017-5-29 20:21 编辑

简介:

焦点图对于我们来说并不陌生,但是感觉它还是平面的结构,没有视觉冲击感,今天我们来做一款具有3D视觉冲击感的爆炸焦点图

效果:

900_500.jpg

动图效果:

GIF5.gif

视频:


技巧:

第一步:使用基本html结构div.banner>ul>li>a>img;清除默认样式,主体分区宽高(一张图片的宽高)及margin设置居中,body使用overflow-x:hidden;(横向滚动条隐藏);引入bomb.css

第二步:引入jquery,jquery-bomb.js

第三步:使用js如下

$('.banner').bomb({
    //col:3, //最小不要小于2,小于2之后会默认显示2 最大不要超过10
    //row:3 //最小不要小于2,小于2之后会默认显示2 最大不要超过10
});

详细代码及技巧笔记:

回复可查看全部代码演示地址和笔记:

游客,如果您要查看本帖隐藏内容请回复

想了解更多内容,可以点击以下链接:


小码哥官网:http://www.520it.com/


网页UI学院:http://www.520it.com/special/ui

回复 使用道具
举报
yemeifeng

发表于 04-11 00:19 显示全部楼层

。。。。。。。。。。。

回复 支持 反对 使用道具
举报
设计师傅

发表于 03-22 02:05 来自手机 显示全部楼层

厉害厉害
回复 支持 反对 使用道具
举报
zhen

发表于 03-19 23:13 显示全部楼层

给老师点个赞!

回复 支持 反对 使用道具
举报
画心

发表于 01-31 16:18 显示全部楼层

老师,这个案例很实用。看好你!
回复 支持 反对 使用道具
举报
欧水萍

发表于 2017-12-19 23:09 显示全部楼层

666
回复 支持 反对 使用道具
举报
万昕

发表于 2017-10-02 13:56 显示全部楼层

嗯,不错,但是插件在哪里呢

回复 支持 反对 使用道具
举报
收起回复 展开
赵延明老师 万昕   发表于 01-11 12:38

插件你回复一下后,就可以看到了。

跳马

发表于 2017-09-27 10:58 显示全部楼层

回复 支持 反对 使用道具
举报
shaohua

发表于 2017-09-27 09:40 显示全部楼层

回复 支持 反对 使用道具
举报
稀饭呐

发表于 2017-08-18 10:34 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
12345下一页

发表新文章
赵延明老师

小码哥名师团队

0

学分

3168

学币

3447

积分

小码哥名师团队

Rank: 5Rank: 5

积分
3447

小码哥一周年勋章关注小码哥教育公众号意见领袖勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育