轻量级的jQuery投票界面效果

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

书写css代码。* { margin: 0; padding: 0; }#VoteMain { width: 500px; height: 400px; margin: 0 auto; margin-top: 0px; padding: 20px 20px 20px 20px; }.VoteItem { width: 100px; height: 100%; border: 1px solid #efefef; float: left; margin-left: 20px; }.VoteValue { width: 50px; height: 100px; background-color: #f47920; margin: 0 auto; margin-bottom: 0px; border: 1px solid #fff; }.VoteItem:hover .VoteSpan { display: block; }.VoteValue:hover { -webkit-box-shadow: 0px 0px 5px #808080; -moz-box-shadow: 0px 0px 5px #808080; box-shadow: 0px 0px 5px #808080; }.VoteSpan { width: 80px; height: 30px; background-color: #000; float: left; margin-top: -38px; margin-left: -15px; text-align: center; line-height: 30px; color: #fff; text-align: center; position: relative; display: none; }.VoteImg { width: 60px; height: 60px; position: relative; -webkit-box-shadow: 0px 0px 5px #ccc; -moz-box-shadow: 0px 0px 5px #ccc; box-shadow: 0px 0px 5px #ccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #fff; margin: 0 auto; margin-left: 5px; margin-top: 10px; cursor: pointer; }.VoteImg:hover { border-color: #4e72b8; -webkit-box-shadow: 0px 0px 5px #444693; -moz-box-shadow: 0px 0px 5px #444693; box-shadow: 0px 0px 5px #444693; }.VoteText { font: 15px "微软雅黑", Arial, Helvetica, sans-serif; text-align: center; font-weight: 600; color: #333; line-height: 10px; margin-top: 5px; }.VoteSpanTri { position: absolute; width: 10px; height: 6px; margin-top: 30px; margin-left: -15px; }

书写并添加js代码。

代码整体结构。

查看效果。