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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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
检测png图片是否完整的php代码
2010/09/06 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
webpack之devtool详解
2018/02/10 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
园林毕业生自我鉴定范文
2013/12/29 职场文书
药店主任岗位责任制
2014/02/10 职场文书
网络工程师职业规划
2014/02/10 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
青安岗事迹材料
2014/05/14 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
法制工作总结2015
2015/07/23 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers