码迷,mamicode.com
首页 > Web开发 > 详细

JS实现自动生成li,产生每10个换行,颜色变换,正V,倒V效果图

时间:2016-06-01 01:25:44      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:

Q:几个星期前,在学习这部分内容的时候,还一直很迷惑,现在就给具体说一下这个效果的实现过程

A:首先,请看效果图 Demo

需要注意的是,这种效果是用absolute属性,而不是float属性,从这个Demo中又一次认识到absolute属性的强大。貌似需要注意的只有这一点。

Q:JS填写含背景图片效果的代码,总是出现错误?

A:代码块

        window.onload = function(){
            var oPanel = document.getElementsByClassName(‘container‘);
            for(var i=0;i<64;i++){
                oPanel[0].innerHTML += "<div style=‘width:50px;height:50px;position:absolute;top:" + parseInt(i/8)*51 + "px;left:"+ 51*(i%8) + "px;background:url(images/01.jpg)"+ " no-repeat " + -51*(i%8) + "px " + -51*parseInt(i/8) + "px;opacity:0;filter:alpha(opacity:0)‘" + "></div>";
            }
            var oDiv = oPanel[0].getElementsByTagName(‘div‘);
            for(var i=0;i<oDiv.length;i++){
                oDiv[i].onmouseover = function(){
                this.style.opacity = 1;
                this.style.filter = ‘alpha(opacity:‘ + 100 + ‘)‘;
                }
            }
        }

 

JS实现自动生成li,产生每10个换行,颜色变换,正V,倒V效果图

标签:

原文地址:http://www.cnblogs.com/zhaolina/p/5548137.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!