JS实现点击文字对应DIV层不停闪动效果的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
vue的for循环使用方法
Feb 12 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
详解Node.JS模块 process
Aug 31 Javascript
JavaScript定时显示广告代码分享
Mar 02 #Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 #Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 #Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 #Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 #Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 #Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 #Javascript
You might like
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
高三体育教学反思
2014/01/29 职场文书
初中学校对照检查材料
2014/08/19 职场文书
2014年设计师工作总结
2014/11/25 职场文书
党校培训学习心得体会
2016/01/06 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL