图片展示特效_学习笔记

首页免费课图片展示特效笔记

图片展示特效

                
                vivian
            Web前端工程师

                    查看讲师更多课程 
                    vivian讲师的其他课程
                
JS动画效果
初级·113941
免费课程
                                
                难度初级
            
                时长47分
            
                学习人数
            
综合评分9.53
                            97人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.5
                                简洁易懂
                            
                                9.4
                                逻辑清晰

最热最新

一大桃

笔记

查看全部

1 采集收起来源：简单展示效果
2018-03-22
bluesea哈哈哈

发发

查看全部

1 采集收起来源：代码优化
2018-03-22
霜花似雪

1、名词术语：作用域。比如： div1.style.top=160+"px"; div2.style.top=160+"px"; 它们的作用域分别是div1和div2 2、console.log(); 说明：小括号内传想要显示的内容作用：浏览器控制台输出日志，用来调试程序 3、在这里函数的两种写法： oDiv.onmouseover = showAtop(); oDiv.onmouseover = showAtop; 注意：这里showAtop是一个函数，这两种写法都正确，因为函数后面的小括号是可以省略的 4、定义完函数showMeg，如果想让3个div每个都有效果，可以调用函数写： showMeg(1); showMeg(2); showMeg(3);

查看全部

1 采集收起来源：代码优化
2018-03-22
暴花花

一、利用div+css对图片进行布局（41行代码注释）提示：图片信息层<a>属性top值的设置二、利用for循环思路配合定位完成图片信息显示及隐藏效果（82、88、95行代码注释）提示: 1.用for语句去循环每一个元素，当前元素触发onmouseover及onmouseout事件 2.事件里去处理top的值，达到想要的效果扩展：可以动手试验，如果信息提示层是从左侧向右显示及隐藏，该如何实现呢？

查看全部

1 采集收起来源：编程练习
2018-03-22
Heson 05:38

透明度兼容

查看全部

1 采集收起来源：简单展示效果
2015-01-11
凤仪

1、布局： <div class="demo"> <ul id="orginImg" class="orginImg"> <li> <a href="#"> <img src="" /> </a> <div>图片的详细信息说明</div> </li> </ul> </div> 2、CSS样式： ① li相对定位 ② 描述图片详细信息的div采用绝对定位position:absolute;top:0;left:100% 注：这里left:100%;可以让它左边的元素正常显示不会被盖住或挤压 3、JS步骤： ① 获取所有的li：通过document.getElementsByTagName ② for循环：ali[i]循环当前是哪个li，让哪个li执行鼠标移入和移出的效果 ③ 把移入效果和移出效果分别放到两个函数里 ④ 针对最后一个li，为了让它的描述图片详细信息的div在最后一个li的左边，需要 var lastLi; lastLi=lis[lis.length-1];//最后一个元素的索引为长度-1 lastLi.getElementsByTagName("div")[0].style.left="auto"; lastLi.getElementsByTagName("div")[0].style.right="100%";

查看全部

1 采集收起来源：单行侧位展示效果
2018-03-22
凤仪

1、要实现鼠标放到图片上，图四周出现边框+底部半透明信息，需要在ul li里设置的代码是 <a href="#"> <img src=""></img> <span></span> </a> 注：效果的实现需要a:hover时，①给a四周加边框+②让span里内容显示 2、透明度的兼容处理： ① filter:alpha(opacity=50);//为IE6设的，可取值在0-100 ② opacity:0.5;//它是CSS标准。该属性支持Firefox，Safari和Opera ③ -moz-opacity:0.5;//老版本的Firefox ④ -webkit-opacity:0.5;//旧的Safari，Chrome ⑤ -khtml-opacity:0.5;//使用KHTML内核而不是webkit内核的Safari

查看全部

1 采集收起来源：简单展示效果
2018-03-22
哈尔波儿

while循环只要指定条件为true，循环就可以一直执行代码。 while和for比较： for使用场合是适合于知道循环次数的场合，for(i=0;i<n;i++){语句}循环条件是n是已知数，可以循环n次 while使用场合是适合于不知道循环次数的场合，while(i<n){语句}，循环条件是不知道要循环多少次，但当i>n的时候停止循环

查看全部

1 采集收起来源：多行侧位展示效果
2018-08-22
Kodo 04:28

CSS 透明度兼容各浏览器写法

查看全部

1 采集收起来源：简单展示效果
2018-03-22
夜莺z 02:18

当定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。此属性参数值越大，则被层叠在最上面。

查看全部

1 采集收起来源：简单展示效果
2017-03-18
缄默蜀黍ONE

Opacity设置透明度，取值为0-100。 . filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认 . -moz-opacity：对mozilla firefox火狐浏览器实现半透明，win IE不认此属性，-moz-opacity:0.5相当于设置半透明为50% . opacity：对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity: 0.5;表示设置50%半透明

查看全部

0 采集收起来源：练习题
2016-04-30
我要动一动

图片信息内容从底部向上显示与隐藏。

查看全部

0 采集收起来源：编程练习
2014-12-14
我要动一动 04:18

for循环初值中值步长

查看全部

0 采集收起来源：深度代码优化
2014-12-13
李云凡x

left: auto; left的值自适应。会根据right的值，left自适应left的值。

查看全部

0 采集收起来源：单行侧位展示效果
2016-04-10
李云凡x

Opacity设置透明度，取值为0-100。 . filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认 . -moz-opacity：对mozilla firefox火狐浏览器实现半透明，win IE不认此属性，-moz-opacity:0.5相当于设置半透明为50% . opacity：对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity: 0.5;表示设置50%半透明

查看全部

0 采集收起来源：练习题
2016-04-10