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

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

发表于 05-27 15:48 显示全部楼层 41 834

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

回复 使用道具
举报
万昕

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

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

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

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

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

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

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

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

我思故我在,我在我就回

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

发表于 08-16 22:10 显示全部楼层

效果很酷炫

回复 支持 反对 使用道具
举报
@@@胡志

发表于 08-15 22:13 显示全部楼层

66666666666

回复 支持 反对 使用道具
举报
树下你好吗

发表于 08-04 09:24 显示全部楼层

求代码

回复 支持 反对 使用道具
举报
scj麦子

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

不错的分享


回复 支持 反对 使用道具
举报
吉祥如意

发表于 07-15 14:49 显示全部楼层

哈哈哈哈

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

发表新文章
赵延明老师

小码哥名师团队

0

学分

2303

学币

2573

积分

小码哥名师团队

Rank: 5Rank: 5

积分
2573

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

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

精彩推荐

  • 关注小码哥教育