JS插件开发之LightBox图片画廊(上)_技术问答

首页免费课 JS插件开发之LightBox图片画廊(上) 问答

JS插件开发之LightBox图片画廊(上)

                
                一只帅蚂蚁
            Web前端工程师

                    查看讲师更多课程 
                    一只帅蚂蚁讲师的其他课程
                
JS插件开发之-Tab选项卡
中级·19821
免费课程
                                
移动端Web组件-Dialog对话框
中级·25973
免费课程
                                
JS插件开发之LightBox图片画廊(下)
中级·15078
免费课程
                                
JS实现“旋转木马”幻灯片效果
中级·66442
免费课程
                                
                难度中级
            
                时长 2小时46分
            
                学习人数
            
综合评分9.80
                            48人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.8
                                逻辑清晰

全部评论问答未解决精华

霍丶

我提莫用的笔记本写的我眼睛都花了。。

0 3-6 获取图片尺寸

2016-11-22

霍丶

找你们这么说的话就甭阻止了呗反正也组织不了img标签到body标签之间的父元素的冒泡

0 3-3 同组别数据获取

2016-11-21

霍丶

鼓掌！啪啪啪啪！

0 3-1 DOM结构渲染

2016-11-21

霍丶

自己磨蹭了一个月再来听一遍果然很轻松....就是面向对象的写法还有 data 的数据存取与分类

0 3-3 同组别数据获取

2016-11-19

ZAnsder

filter过滤，opacity的值是0-100，没有百分单位哦

0 2-2 样式搭建（1）

2016-11-16

慕粉3202480

lightbox-btn { opacity: 0; filter: alpha(opacity=50); }
.lightbox-btn:hover { opacity: 1; filter: alpha(opacity=100); cursor: pointer; }.
lightbox-pre-btn { background: url(prev.png) no-repeat left center; left: 0; }

0 2-2 样式搭建（1）

2016-11-12

ZAnsder

占个位置！

0 1-3 课程面向的用户

2016-11-12

慕粉3202480

左右也可以用opactiy和hover搭配使用,在lightbox－pre－btn和lightbox－next－btn上面就把图片加上然后设置为透明的，鼠标移动上面时候设置opacity透明度为1
#G-lightbox-popup .lightbox-pic-view .lightbox-pre-btn{background: url(../icon/prev.png) no-repeat left center;opacity:0}
#G-lightbox-popup .lightbox-pic-view .lightbox-pre-btn{opacity:1}

0 2-2 样式搭建（1）

2016-11-12

ZAnsder

感谢分享！

1 1-2 预备知识

2016-11-12

Viavia

非常之强大，听上瘾了

0 3-3 同组别数据获取

2016-11-12

小蜜蜂爱飞鸭

看完了，感谢老师，

0 3-10 上下切换按钮功能（2）

2016-10-29

小蜜蜂爱飞鸭

非常好，感谢老师，学到多多

0 3-5 初始化的时候上下切换是否添加标识

2016-10-29

炒了个基

左右icon直接hover实现就可以吧
#G-lightbox-popup .lightbox-pic-view .prev:hover{background: url(../icon/prev.png) no-repeat left center;}
#G-lightbox-popup .lightbox-pic-view .next:hover{background: url(../icon/next.png) no-repeat right center;}

1 2-2 样式搭建（1）

2016-10-28

拉普拉斯丶妖_0

自己跟着视频写的源码： http://pan.baidu.com/s/1jIfR6oI 密码：

0 3-10 上下切换按钮功能（2）

2016-10-24

背着行囊独自流浪

讲的很好，学到很多，感谢！

2016-10-22

首页上一页 3 4 5 6 7 8 9 下一页尾页

开始学习

课程须知: 1、具备扎实的HTML、CSS基础知识 2、具备原生JS编程能力 3、DOM 的节点属性、位置、层级设置获取等操作 4、了解JS原生的this、prototype、new等关键词的意思 5、有一定JS OOP(对象化编程)思想

老师告诉你能学到什么？: 1、HTML、CSS基础知识应用 2、JS OOP 思想开发 3、程序设计，站在产品角度分析需求 4、综合案例分析、如何设计代码 5、DOM 渲染、定位、尺寸应用 6、BOM 视口、resize、scroll 事件应用 7、JQ 配合开发实战 8、IE 下 BUG解决方案 9、用户体验优化

微信扫码，参与3人拼团

热搜

最近搜索清空

JS插件开发之LightBox图片画廊(上)