建立动态标签墙并用js使标签背景颜色随机

一直很喜欢标签墙的设计,觉得设计感特别强烈,而且具有一定的导航引向作用。开始的时候想让标签墙背景颜色随着热门程度由青色变黄色再变成红色,但是实际在操作的过程中

发现如果处理不好,反而不如使用随机颜色来的美观,简单实用最好。

关于标签墙,使用ul,li或者float浮动布局可以轻松实现。

想做的好看使用关键要点:

1.随机分配颜色


elements[i].style.backgroundColor = '#' + (Math.random() * 0xffffff << 0).toString(16); 


2.导航能力,根据关键词找到和关键词相关的博客列表。我首先有一个表用来存储词条,把词条绑定到listview,主要字段有两个,name和statis。name字段是标签墙的显示名称,statis是标签墙的热度,每次我发表一个带有标签博客文章热度自动加1,同时我的词条也可以随时在发表文章时添加。把数据绑定到前端代码如下


<asp:AccessDataSource ID="AccessDataSource0" runat="server" DataFile="C:\storage\users.accdb" SelectCommand="SELECT * FROM [topic] ORDER BY statis DESC">
</asp:AccessDataSource> 
<div style="width: 100%;">
 <%--列表--%> 
<ul style="margin: 0 auto; padding: 0;"> 
<asp:ListView runat="server" DataSourceID="AccessDataSource0"> 
<ItemTemplate> 
<li id='<%# Eval("name", "{0}") %>' style="float: left; width: auto; border: solid 0.02em #d1d0d0; padding: 5px 15px 5px 15px; margin: 2px 4px 2px 4px; background-color: rgb(255,0,0)" > 
<a runat="server" class="noteWall" onserverclick="wallButton" name='<%# Eval("name", "{0}") %>'> 
<%# Eval("name", "{0}") %> (<%# Eval("statis", "{0}") %>) 
</a> 
</li> 
<script type="text/javascript"> 
document.getElementById('<%# Eval("name", "{0}") %>').style.backgroundColor = '#' + (Math.random() * 0xffffff << 0).toString(16); 
</script> 
</ItemTemplate> 
</asp:ListView>
 </ul>


上段代码中,我是用了上面的js让li的背景颜色随机。

导航方案1:

a标签的事件处理程序在后台为onserverclick="wallButton"

后台代码如下:

protected void wallButton (object sender, EventArgs e) 
{ System.Web.UI.HtmlControls.HtmlAnchor btn1 = (System.Web.UI.HtmlControls.HtmlAnchor)sender;
 string Url = Request.Url.ToString(); 
int s = Url.LastIndexOf("/"); 
Url = Url.Substring(0, s); 
//www.songshizhao.com 
Url += "/blog/blogItem/" + btn1.Name + ".html"; 
Response.Redirect(Url); 
}

可以看到我把a标签的name属性值传到后台并读取,而a标签name就是我的词条的name,然后我转到指定代码。

网址格式是这样的,"/blog/blogItem/xxxx.html",这是一个使用了伪静态的页面(为了更好的被引擎收录),使用了网址传值,实际上是对目标网址数据源对数据库的一次select 模糊查询 xxxx,查询我的文章的关键词。并将结果列表显示在前端。

这样就完成了标签墙的制作。


导航方案2:改进版本:

之前使用的方法是在每个词条中插入一个自动执行的脚本,其实脚本可以简单些,不需要每个词条单独一个脚本,只需要一个就够了。例如:


<script> var elements = document.getElementsByClassName("topic"); for (i = 0; i < elements.length; i++) { var strend = window.location.href.lastIndexOf("/") + 1; elements[i].href = window.location.href.substring(0, strend) + elements[i].name + ".html"; elements[i].style.backgroundColor = '#' + (Math.random() * 0xffffff << 0).toString(16); } </script>


主要是用getelementsbyclass获得全部词条数组,然后使用脚本对每个关键词增加href链接属性。

总结:这种2种方法都可以导航,但由于使用脚本或者后台赋予属性,对搜索引擎无效。因此对用户意义远远大于对搜索引擎的意义,使用时注意用户体验。

作者:songshizhao 发表于:2017-02-25T06:07:14 访问量:2239
评论 [发表评论]