杰少Pakey's BLOG

人性化小提示功能，适用于翻页页面

作者：pakey 发布时间：January 10, 2012 分类：杂七杂八

先看下效果图

这个在翻页或者在小说章节末尾加上去很友好。

这个需要3部门构成 css js html代码

html代码如下

<script>var doc_page_tip=get_cookie("doc_page_tip");if(!doc_page_tip){document.write('<div class="ts_fy"><em class="close"></em>提示：试试“← →”可以实现快速翻页</div>');}</script>

JS代码如下

主要是获取cookies 设置cookies以及关闭提示时候的cookies操作，ps 需要jq支持

核心代码如下

$(".close").click(function() {
        $(".ts_fy").hide();
        setCookie("doc_page_tip", "1")
    });
function get_cookie(varname){
	var tmp_ary = new Array();
	if (varname){
		a = document.cookie.indexOf(varname+"=");
		if (a != -1){
			b = document.cookie.substring((a+varname.length+1),document.cookie.length);
			c = b.split(";");
			d = c[0];
			return d;
		}
	}
}
function setCookie(name, value){
	var argv = setCookie.arguments;
	var argc = setCookie.arguments.length;
	var expDay = (argc > 2) ? argv[2] : 30;
	try{
		expDay=parseInt(expDay);
		if(expDay<0)expDay=0;
	}catch(e){
		expDay=30;
	}
	var expDate = new Date();
	// The expDate is the date when the cookie should expire, we will keep it for a month
	expDate.setTime( expDate.getTime() + (expDay * 24 * 60 * 60 * 1000) ); 
	setCookieVal( name, value, expDate,'/','.zol.com.cn'); 	
}

css部分

.ts_fy{background:url(http://icon.zol-img.com.cn/article/2011/tcbg.gif) 0 -26px;width:250px;height:34px;text-align:center;line-height:30px;color:#666;position:absolute;right:198px;top:-35px;}
.close{float:right;display:inline;width:8px;height:7px;margin:6px 5px 0 0;background:url(http://icon.zol-img.com.cn/article/2011/libg.gif) no-repeat -1px -909px;cursor:pointer;}

看到这里，如果感兴趣，你可以去试一下了！

标签: none