JS实现点击文字对应DIV层不停闪动效果的方法,
分类:新闻中心

图片一出来,过5秒钟,开始闪动,然后停止。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

复制代码 代码如下:

本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法。分享给大家供大家参考。具体分析如下:

var inter={};
var i=0;
$(document).ready(function(){
$("a").each(function(index,item){
$(this).bind().click(function(){
i=index;
if(inter!=null || inter.length>0){
window.clearInterval(inter);
}

window.setTimeout(function(){
inter=window.setInterval(function(){ $("img").eq(i).show().fadeOut(100).fadeIn(100);},500);
window.setTimeout(function(){
window.clearInterval(inter);
},5000);
},5000);

});

});
window.setTimeout(function(){
inter=window.setInterval(function(){ $("img").eq(i).show().fadeOut(100).fadeIn(100);},500);
window.setTimeout(function(){
window.clearInterval(inter);
},5000);
},5000);
});

您可能感兴趣的文章:

  • 一个JS函数搞定网页标题(title)闪动效果
  • JS实现点击文字对应DIV层不停闪动效果的方法
  • js防止DIV布局滚动时闪动的解决方法
  • js图片闪动特效可以控制间隔时间如几分钟闪动一下
  • JS实现闪动的title消息提醒效果
  • javascript title闪动效果
  • JS实现消息来时让网页标题闪动效果的方法

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
</head>
<body>
<script language="JavaScript">
 step=0
 function flash_title()
 {
  step++
  if (step==3) {step=1}        
  if (step==1) {document.title='【你有新的消息】'}
  if (step==2) {document.title='【      】'}
  setTimeout("flash_title()",380);
 }
 flash_title()
</script>
aaaaaaddaaaaaa
</body>
</html>

在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错的一个动态效果,容易引起顾客的注意,这个代码就是实现了这个效果,点击某个方块后,方块就会闪动

您可能感兴趣的文章:

  • 一个JS函数搞定网页标题(title)闪动效果
  • 用javascript实现“闪动”标题栏
  • JS实现点击文字对应DIV层不停闪动效果的方法
  • js防止DIV布局滚动时闪动的解决方法
  • JS实现闪动的title消息提醒效果
  • javascript title闪动效果
  • JS实现消息来时让网页标题闪动效果的方法

您可能感兴趣的文章:

  • 用javascript实现“闪动”标题栏
  • JS实现点击文字对应DIV层不停闪动效果的方法
  • js防止DIV布局滚动时闪动的解决方法
  • js图片闪动特效可以控制间隔时间如几分钟闪动一下
  • JS实现闪动的title消息提醒效果
  • javascript title闪动效果
  • JS实现消息来时让网页标题闪动效果的方法

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<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程序设计有所帮助。

您可能感兴趣的文章:

  • 一个JS函数搞定网页标题(title)闪动效果
  • 用javascript实现“闪动”标题栏
  • js防止DIV布局滚动时闪动的解决方法
  • js图片闪动特效可以控制间隔时间如几分钟闪动一下
  • JS实现闪动的title消息提醒效果
  • javascript title闪动效果
  • JS实现消息来时让网页标题闪动效果的方法

本文由美高梅网址发布于新闻中心,转载请注明出处:JS实现点击文字对应DIV层不停闪动效果的方法,

上一篇:javascript中的__defineGetter__和__defineSetter__介绍 下一篇:没有了
猜你喜欢
热门排行
精彩图文