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程序设计有所帮助。
相关文章
智力测试题经常遇到类似的逻辑题，给几个容量不等的杯子，让你倒出多少的水，感兴趣的朋友可以参考下哈希望可以帮助到你2013-03-03
表单验证正则的代码，大家可以参考下，可以直接拿来使用，也可以用来学习正则。2009-09-09
最近一直在做业务，遇到一个需求是页面顶部需要展示图片，可以拖动，拖动到最后一张的时候需要无缝切换到第一张，从而实现循环滑动，所以本文就来和大家分享一下实现方法2023-05-05
对于html中的一些元素注册事件的方式有多种，接下来将为大家详细介绍下，大家可以测试并对比下根据自己的习惯使用哪一种方式2013-03-03
本文给大家介绍BootStrap Typeahead自动补全插件的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下2016-08-08
这篇文章主要为大家详细介绍了如何利用JS实现飞机大战游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了ES6使用let命令更简单的实现块级作用域,结合实例形式分析了ES6中let命令与var的区别及具体使用方法,需要的朋友可以参考下2017-03-03
Promise，相信每一个前端工程师都或多或少地在项目中都是用过，毕竟它早已不是一个新名词。ES6中已经原生对它加以支持，在caniuse中搜索一下 Promise ，发现新版的chrome和firefox也已经支持。但是低版本的浏览器我们可以使用 es6-promise 这个 polyfill 库来加以兼容。2017-02-02
2013-11-11
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),下面这篇文章主要给大家介绍了关于webpack打包进度展示以及美化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
最新评论