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的动态创建表格的插件
Apr 05 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
jquery实现全屏滚动
Dec 28 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
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
第十二节--类的自动加载
2006/11/16 PHP
function.inc.php超越php
2006/12/09 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
用Django实现一个可运行的区块链应用
2018/03/08 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
一道Delphi面试题
2016/10/28 面试题
大学毕业后的十年规划
2014/01/07 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
员工培训邀请函
2014/02/02 职场文书
领导党性分析材料
2014/02/15 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
经济国贸专业求职信
2014/06/18 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
vue递归实现树形组件
2022/07/15 Vue.js