记录我工作学习生活中的点点滴滴......

人性化小提示功能,适用于翻页页面
发布于 Javascript
2012-01-10 14:16:02
4013
2

先看下效果图

1.jpg

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

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

html代码如下

<script>var doc_page_tip=get_cookie("doc_page_tip");if(!doc_page_tip){document.write('<div><em></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;}

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



分享本文到:
除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:Pakey's BLog >>Javascript >>人性化小提示功能,适用于翻页页面
本文地址:http://www.pakey.net/blog/fytip.html