根据ajax回传的json动态生成dom并追加CSS样式

最新推荐文章于 2024-11-06 04:55:34 发布

weixin_30677073

最新推荐文章于 2024-11-06 04:55:34 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/LinsenLi/p/9096307.html

本文介绍了一种利用jQuery实现动态瀑布流布局的方法。通过解析JSON数据并遍历生成DOM元素，实现了博客数量变化时布局的自适应调整。此外，还介绍了如何通过CSS样式设置鼠标悬停效果。

模拟一个博客，当自己有多少条博客，就动态生成多少块瀑布样式：

1、先通过jquery方法将json数组字符串转化为对象形式：

　　var tem = $.parseJSON(result);

2、循环遍历json长度，动态生成样式，并追加CSS属性：

　　当追加hover样式时，查阅文档，里面两个函数分别是鼠标进去以及出去的事件，当只写一个函数，则鼠标进出都实现同样的行为

　　类选择器下使用this确定到具体的模块下：

                $('.topInfoThumb p a').hover(function(){
                        $(this).css("color","rgba(225,51,102,1)");
                    },function(){
                        $(this).css("color","rgba(125,153,204,1)");
                    }
                );

　　基础html嵌套以及CSS选择范围