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

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

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

本帖最后由 赵延明老师 于 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

回复 使用道具
举报
哈哈哈12

发表于 08-10 23:13 显示全部楼层

1111111111111111111111111111111111111111111111111111111111111
回复 支持 反对 使用道具
举报
哈哈哈1

发表于 07-20 20:17 显示全部楼层

给老师点个赞!


回复 支持 反对 使用道具
举报
锐不可挡

发表于 07-19 23:36 显示全部楼层

晚上好

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

发表于 07-15 23:09 显示全部楼层

支持一下

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

发表于 06-30 19:55 显示全部楼层

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

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

。。。。。。。。。。。

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

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

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

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

给老师点个赞!

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

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

老师,这个案例很实用。看好你!
回复 支持 反对 使用道具
举报
12345下一页

发表新文章
赵延明老师

小码哥名师团队

0

学分

3443

学币

3725

积分

小码哥名师团队

Rank: 5Rank: 5

积分
3725

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

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

精彩推荐

  • 关注小码哥教育