JS实现点击文字对应DIV层不停闪动效果的方法
更新时间：2015年03月02日 12:07:49 作者：站长学院
这篇文章主要介绍了JS实现点击文字对应DIV层不停闪动效果的方法,实例分析了javascript操作div层的效果,非常实用,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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">脚本之家提示：你敢点我，我就敢闪</div>
</body>
</html>
<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">脚本之家提示：你敢点我，我就敢闪</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
JS多物体 任意值 链式 缓冲运动,需要的朋友可以参考下2012-08-08
本文主要介绍了js对cookie的操作：js设置cookie；js获取cookie；给cookie设置终止日期；删除cookie 等，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
虽然说在前端很少有机会接触到算法，大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。下面这篇文章就给大家总结了在前端JS面试中常见的算法问题，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要为大家详细介绍了Bootstrap 警告框（Alert）插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了基于javascript制作微信聊天面板的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
本文主要介绍了SVG描边动画的相关实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JavaScript使用concat连接数组的方法,实例分析了javascript中concat函数操作数组的技巧,需要的朋友可以参考下2015-04-04
javascript开发随笔一 preventDefault的必要
给a做按钮的click事件加preventDefault阻止浏览器的默认行为貌似是印象中必须的事情2011-11-11
这篇文章主要介绍了JavaScript弹出新窗口后向父窗口输出内容的方法,涉及javascript窗口操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
JS 如果改变span标签的是否隐藏属性,大家根据需要选择使用。2011-10-10
最新评论