金麦网络:WWW.KINGMX.COM
网站首页
站长论坛
高级搜索
Blog
RSS2.0
本站首页
|
程序设计
|
新闻资讯
|
网站运营
|
网页设计
|
美工设计
|
数据库技术
|
网络技术
|
Linux/Unix
PHP技术
ASP技术
JSP技术
CGI技术
ASP.NET
C#技术
XML技术
综合编程
业界
人物
访谈
安全
搜索引擎
推广研究
盈利研究
建站心得
站长故事
分析策划
Dreamweaver
FrontPage
Javascript
HTML/Xhtml
CSS
心得技巧
PHOTOSHOP
FIREWORK
FLASH
CORELDAW
ACCESS
MSSQL
MYSQL
ORACLE
网络知识
网络管理
网络安全
病毒防治
系统学习
系统配置
系统应用
系统开发
当前位置:
首页
>
网页设计
>
Javascript
> 正文
高亮闪烁某个元素
日期:
2007-04-25
点击:
1157
作者:
未知
来源:
网络转载
页面上有些重要内容需要提醒客户,可采用的方法有很多。提醒用户关注某一区域(div),可以给该div加上边框闪烁的效果,达到吸引用户眼球的效果。
HTML代码
<script language="javascript" type="text/javascript"> <!-- /*常用函数库---开始---*/ function $(objString){ return document.getElementById(objString); } function addClass(elem,classString){ if(typeof(elem)=="string") var obj = document.getElementById(elem); else if(typeof(elem)=="object") var obj = elem; obj.className = obj.className + " "+classString; } function removeClass(elem,classString){ if(typeof(elem)=="string") var obj = document.getElementById(elem); else if(typeof(elem)=="object") var obj = elem; var classNameArray = obj.className.split(" "); for (i=0; j=classNameArray[i] ; i++){ if(j==classString){ classNameArray.splice(i,1); i--; } } obj.className = classNameArray.join(" "); } function hasClass(elem,classString){ if (typeof(elem)=="string"){ var obj = document.getElementById(elem); }else if(typeof(elem)=="object"){ var obj = elem; } if (obj.className.indexOf(" ")!=-1){ var cls = obj.className.replace(/ /g,"|"); cls = "|"+cls+"|"; if (cls.indexOf("|"+classString+"|")!=-1){ return true; }else{return false} }else{ if (obj.className == classString){ return true; }else{ return false; } } } /*常用函数库---结束---*/ function highLight(obj){ if (obj.highlightHandel!=null) return; obj.highlightHandel = setInterval(function(),250); } function twinkle(objBox){ hasClass(objBox,"highLight")?removeClass(objBox,"highLight"):addClass(objBox,"highLight"); } function stopTwinkle(obj){ clearInterval(obj.highlightHandel); removeClass(obj,"highLight"); obj.removeAttribute("highlightHandel"); } //--> </script> <style> .box {border:1px solid #ccc; height:100px; width:600px; text-align:center; line-height:100px; background-color:#f7f7f7} .highLight {background-color:#ffffcc; border:1px solid #f30} </style> <div id="demo" class="box"> Box I </div> <br> <input type="button" value="闪烁" onclick="highLight($('demo'))" /> <input type="button" value="停止" onclick="stopTwinkle($('demo'))" /> <br> <br> <div id="demo2" class="box"> Box II </div> <br> <input type="button" value="闪烁" onclick="highLight($('demo2'))" /> <input type="button" value="停止" onclick="stopTwinkle($('demo2'))" />
代码长度:86行,2255个字符(其中2074个非空字符)
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
代码里包含有几个常用函数(已用注释分割开),可用 prototype.js 中的方法替换,下面的几个函数略作修改也可运行。
与好友分享此资讯:
关闭窗口
打印本页
论坛讨论
热门文章
关于 页面中 body onload 和
解决Javascript由于编码不同造
TextBox只能输入数字的最简洁
连续滚动图片的制作
Javascript所有对象的属性的获
jquery使用手册(16)
制作仿 Flash 的图片渐变效果
loading indicator(页面装载指
探析JavaScript中令人困惑的变
jquery使用手册(13)
推荐文章
JS 正则 详解
解决Javascript由于编码不同造
TextBox只能输入数字的最简洁
高亮闪烁某个元素
探析JavaScript中令人困惑的变
jquery使用手册(16)
jquery使用手册(15)
jquery使用手册(14)
jquery使用手册(13)
jquery使用手册(12)
相关文章
无提示信息禁止鼠标右键的脚本
常用的表单提交判断函数
滚动文字新闻的制作
改变图片链接的边框颜色
图片马赛克变化效果 Pic mosa
制作仿 Flash 的图片渐变效果
连续滚动图片的制作
网页中图片的随机显示
制作阴影效果的表格
使你的主页千变万化