一些关于网页标题的动态js特效
1.当转换页面时,标题改变
<script>
document.addEventListener('visibilitychange',function(){
if(document.visibilityState=='hidden') {
normal_title=document.title;
document.title='(づ ̄ 3 ̄)づ';
}
else
document.title=normal_title;
});
</script>
2.标题闪动,你有新的消息
<script language="JavaScript">
step=0
function flash_title()
{
step++
if (step==3) {step=1}
if (step==1) {document.title='【你有新的消息】'}
if (step==2) {document.title='【 】'}
setTimeout("flash_title()",380);
}
flash_title()
</script>
也可以尝试浏览器兼容版
<script language="JavaScript">
setTimeout('flash_title()',2000); //2秒之后调用一次
function flash_title()
{
//当窗口效果为最小化,或者没焦点状态下才闪动
if(isMinStatus() || !window.focus)
{
newMsgCount();
}
else
{
document.title='订单管理中心-AOOXING';//窗口没有消息的时候默认的title内容
window.clearInterval();
}
}
//消息提示
var flag=false;
function newMsgCount(){
if(flag){
flag=false;
document.title='【新订单】';
}else{
flag=true;
document.title='【 】';
}
window.setTimeout('flash_title(0)',380);
}
//判断窗口是否最小化
//在Opera中还不能显示
var isMin = false;
function isMinStatus() {
//除了Internet Explorer浏览器,其他主流浏览器均支持Window outerHeight 和outerWidth 属性
if(window.outerWidth != undefined && window.outerHeight != undefined){
isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
}else{
isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
}
//除了Internet Explorer浏览器,其他主流浏览器均支持Window screenY 和screenX 属性
if(window.screenY != undefined && window.screenX != undefined ){
isMin = window.screenY < -30000 && window.screenX < -30000;//FF Chrome
}else{
isMin = window.screenTop < -30000 && window.screenLeft < -30000;//IE
}
return isMin;
}
</script>
3.浏览器标题滚动跑马灯
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE栏上滚动的文字</title>
<script language=javascript >
var text=document.title
var timerID
function newtext() {
clearTimeout(timerID)
document.title=text.substring(1,text.length)+text.substring(0,1)
text=document.title.substring(0,text.length)
timerID = setTimeout("newtext()", 100)
}
</script>
</head>
<body onload="newtext()"></body>
</body>
</html>
<html>
<head>
一些关于网页标题的动态js特效的更多相关文章
- 又到圣诞节,让你的网页下起雪(js特效)
又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...
- 网页标题(title)动态改变
这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 : 要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...
- Vue动态修改网页标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- Hexo瞎折腾系列(9) - 网页标题崩溃特效
前言 本系列的所有修改均基于本系列第一篇中的新增文件(譬如custom.js),请先自行阅读Hexo瞎折腾系列(1) - 准备工作与简单美化:并按照文章所说自行修改代码或文件. 为网页添加标题崩溃特效 ...
- js判断网页标题包含某字符串则替换
js判断网页标题包含某字符串则替换,代码如下: var tit=document.title; if(tit.indexOf("afish")>0){ tit=tit.rep ...
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- jquery无法修改网页标题,无法修改网页标题
今天遇到一个问题,搜索时动态修改网页标题,用jquery的这段代码无效,无论FF还是IE $("title").html("new title"); 后来只好用 ...
- JS一般般的网页重构可以使用Node.js做些什么(转)
一.非计算机背景前端如何快速了解Node.js? 做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过. 对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.j ...
- jQuery闪烁提示,让新消息在网页标题显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...
随机推荐
- win10中安装jdk1.8
一.JDK下载 两种方法,第一种是从官网下载:第二种是拿来主义,小拿直接给你网盘地址.不过,作为java新手,最好还是学会去官网下载. 官网下载的文件才是最安全的,从不靠谱第三方下载有可能安装包有缺失 ...
- [CF1303G] Sum of Prefix Sums - 点分治,李超线段树
给定一棵 \(n\) 个点的带点权的树,求树上的路径 \(x_1,...,x_k\) ,最大化 \(\sum_{i=1}^k ia_{x_i}\) Solution 树上路径问题可用点分治. 考虑如何 ...
- MarkDown图文编辑系列教程(二)
一.写在前面 引言 本文是我写的MarkDown系列教程的第二篇,前一篇的地址:MarkDown图文编辑系列教程(一) 读完本篇,你将获得 学会使用markdown语法进行:区块引用(一种常用的引用格 ...
- APP和web设计区别
1.web在给定了核心功能后,还可以往页面再添加小需求如banner.快捷工具条.分页等. APP界面设计时,则偏向精简,尽可能明显的展示核心功能. 2.APP中需要考虑ISO和Andriod两种交互 ...
- If no other git process is currently running, this probably means a git proc
原因:用SourceTree提交代码,发现这个问题.好像是因为上个进程没停止,造成文件不识别 解决:把仓库目录里的.git/index.lock文件(文件是隐藏的)删除就可以了.删除index.loc ...
- TensorFlow入门(常量变量及其基本运算)
1.tensorflow常量变量的定义 测试代码如下: # encoding:utf-8 # OpenCV tensorflow # 类比 语法 api 原理 # 基础数据类型 运算符 流程 字典 数 ...
- swagger文档使用
https://www.cnblogs.com/suizhikuo/p/9397417.html
- Selenium3+python自动化011-unittest生成测试报告(HTMLTestRunner)
批量执行完用例后,生成的测试报告是文本形式的,不够直观,为了更好的展示测试报告,最好是生成HTML格式的. unittest里面是不能生成html格式报告的,需要导入一个第三方的模块:HTMLTest ...
- ubuntu19.04 redis启动和停止及连接
1.启动停止 如果以(sudo apt install redis-server)方式安装 启动: sudo srevice redis start 停止: sudo srevice redi ...
- AngularJS中transclude用法详解
这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...