这篇文章主要介绍了 JS 实现点击文字对应 DIV 层不停闪动效果的方法, 实例分析了 javascript 操作 div 层的效果, 非常实用, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS 实现点击文字对应 DIV 层不停闪动效果的方法。分享给大家供大家参考。具体分析如下:
在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错的一个动态效果,容易引起顾客的注意,这个代码就是实现了这个效果,点击某个方块后,方块就会闪动
- <!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>
- js实现点击文字对应DIV层闪动
- </title>
- <style type="text/CSS">
- #box{position:absolute;top:50%;left:50%;color:#fff;width:200px;height:200px;background:red;cursor:pointer;letter-spacing:5px;text-align:center;font:12px/200px
- Arial;margin:-100px 0 0 -100px;}
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var oBox = document.getElementById("box");
- var timer = null;
- oBox.onclick = function() {
- var i = 0;
- clearInterval(timer);
- timer = setInterval(function() {
- oBox.style.display = i++%2 ? "none": "block";
- i > 6 && (clearInterval(timer))
- },
- 80)
- }
- };
- </script>
- </head>
- <body>
- <div id="box">
- phperz提示:你敢点我,我就敢闪
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: