QQ控件时光轴特效总结
1、插入HTML数据
插入html代码,一般的做法是通过document.getElementById("").innerHTML来实现。
然而在该控件中,它通过JS replace()来实现这个功能。
在HTML代码中{year}{list}都是用来替代相应HTML代码的,在JS中可以动态的给它替换成需要的内容。
<div id="tpl_scrubber_year">
<a href="javascript:;" onclick="showYear({year},this)" class="s_year" id="scrubber_year_{year}">{year}
<!--此处有大量重复内容显示 -->
{list}
</a>
</div>
JS代码中通过replace()方法替换掉{year}类似的标记。
var tpl_scrubber_year = document.getElementById("tpl_scrubber_year").innerHTML.replace(/^\s*/,'').replace(/\s*$/,''); //去空
var year = "<div>.....</div>";
tpl_scrubber_year.replace(/\{year\}/g,year).replace(/\{year\}/g,year);
以前写JS都只是最基本的实现,很少能够将一个组件从头到尾完整的敲出来(虽然只是看着别人的代码重复敲一遍),但对我来说都是一种很新奇、难得的体验。
像这种通过替换标记字符(表达式)的形式,在JSP中EL表达式就有实现,只是从来都没有往这方面想过,没能举一反三。
2、unshift()
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
scrubber_month.unshift( tpl_scrubber_month.replace(/\{year\}/g,year).replace(/\{month\}/g,month) );
JS中关于数组元素操作的方法有不少,例如常用的push()、pop()、splice()等等。
3、字符串拼接
一般情况下,字符串拼接都是通过 “+” 来完成。即时,知道通过数组的join()方法可以达到同样的效果,也很少会使用。
html_scrubber.join('')
4、内容始终浮动在窗口上方
position:fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
window.onscroll = function(){ var top = document.body.scrollTop ;
if( top > 100){
g('scrubber').style.position = 'fixed';
g('scrubber').style.left = (getBodyW()-960)/2+ 'px';
g('scrubber').style.top = '60px';
}else{
g('scrubber').style.position = '';
g('scrubber').style.left = '';
g('scrubber').style.top = '';
}
}
QQ控件时光轴特效总结的更多相关文章
- devexpress控件layoutview特效之一旋转木马的实现
1.devexpress有很多很好的特效,最近做了个旋转木马的特效,给大家分享下.效果图如下: 2.这里的控件为gridcontrol,里面的view为layoutview.数据绑定的代码与其他gri ...
- duilib修复ActiveXUI控件bug,以支持flash透明动态背景
转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...
- 高仿QQ顶部控件之IOS SegmentView
经常会看到QQ上面有一个 消息和电话 的顶部面板,这个空间是IOS7的分段控制,android中没有这个控件,今天在威哥的微信公众号中成功gank到这个自定义控件的实现,下面跟着尝试一波. 首先是定义 ...
- [iOS基础控件 - 6.12.1] QQ菜单管理 UITabBarController 控制器管理
A.需求 1.类似QQ.微信顶部或者底部的窗口转换导航条 2.给每个页面添加相应内容 B.UITabBarController 1.基本概念: (1)内容高度 iOS7之前内容高度为:屏幕高度 - ...
- [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView
A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组 code so ...
- Android自定义View,高仿QQ音乐歌词滚动控件!
最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出.今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果.OK,废话不多说,先来看看效果图: ...
- [iOS基础控件 - 3.1] QQ登陆界面
A.storyboard 控件版 1.label 2.textfield a.Keyboard Type 账号:Number Pad 密码:Num ...
- WPF 自定义TreeView控件样式,仿QQ联系人列表
一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...
- 安卓自定义日期控件(仿QQ,IOS7)
还记得上篇:高大上的安卓日期时间选择器,本篇是根据上篇修改而来,先看下qq中日期选择的效果: 鉴于目前还没有相似的开源日期控件,因此本人花费了一些时间修改了下之前的日期控件,效果如图: 虽说相似度不是 ...
随机推荐
- Linux操作系统的安装以及基本的操作命令详解
背景:使用的虚拟机安装Linux 虚拟机使用的是VMware Linux版本:CentOS-6.7-X86 自行下载:CentOS-6.7-x86_64-bin-DVD1.iso 打开VMw ...
- 日志-logback
参考:http://www.importnew.com/22290.html 一 概述 1.1 LogBack.Slf4j和Log4j之间的关系 1)Slf4j(The Simple Logging ...
- 集群环境ssh免密码登录设置
一.准备工作 1) 用客户端工具(ssh client或者putty)连接到linux服务器.在root用户下输入命令 vi /etc/hosts,用vi编辑hosts文件,如下: #127.0.0. ...
- Codeforces Round #273 (Div. 2) A , B , C 水,数学,贪心
A. Initial Bet time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- Linux下Apache的安装与配置
本文安装的httpd版本为httpd 2.4.4安装之前确保 Development Libraries与Development tools安装上.安装方法参考:http://www.linuxidc ...
- Bellman-Ford算法 O(NE)
Bellman-Ford算法 O(NE) 思路:枚举n-1次所有边,通过枚举所有边,将所有和已知点相连的点都设为已知,初始时起点为已知点. ;i<=n-;i++){ //n-1是次数,枚举n-1 ...
- SQL group by底层原理——本质是排序,可以利用索引事先排好序
转自:http://blog.csdn.net/caomiao2006/article/details/52140993 由于GROUP BY 实际上也同样会进行排序操作,而且与ORDER BY 相比 ...
- 一个丰富的通知工具类 --第三方开源--NotifyUtil
把NotifyUtil Copy进自己的项目就好 实现有八种,作者在Demo里全部演示齐了,分别是 普通类型通知(单行) 普通类型通知(多行) 消息列表通知(含双图标) 含大图类型通知 自定义视图通知 ...
- python--基本代码规范
python代码规范:一.标识符 所谓的标识符就是对变量.常量.函数.类等对象起的名字 python语言在任何场景都严格区分大小写!!! python对于标识符的命名有如下规定: 第一个字符必须是字母 ...
- gradle_学习_02_gradle多模块构建实例
一.前言 二.多模块构建 1.工程结构 父工程:weixin-service 子模块:weixin-gz weixin-qy 2.父工程 weixin-service (1)build.gradle ...