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 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 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版)
2012/08/21 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
基于python socketserver框架全面解析
2017/09/21 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
党员自我对照检查材料
2014/08/19 职场文书
关于感谢信的范文
2015/01/23 职场文书
社区文明倡议书
2015/04/28 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Python Parser的用法
2021/05/12 Python
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android