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 相关文章推荐
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
Angular的事件和表单详解
Dec 26 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
Js代码中的span拼接问题解决
Nov 22 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限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
初识PHP中的Swoole
2016/04/05 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python梯度下降法的简单示例
2018/08/31 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
护理工作感言
2014/01/16 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
工作说明书范文
2014/05/07 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
婚宴领导致辞
2015/07/28 职场文书
技术转让协议书
2016/03/19 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS