求的一个类似腾讯抖动的窗口,想增加一些用户的体验,比如在用户输入错误时抖动一下,一个很友好的提示...

2011-02-09 15:22:56

4 Answers

这个我测试了一下也是很好的一个抖动效果 

<style type="text/css"> #body{text-align:center;} #test{width:119px;position:absolute;margin:10px auto;height:114px;background:url(http://www.dewen.org/theme/images/default_k.jpg) ;border:2px dotted red;} </style> <div style='margin:10px 200px'> <div><input type="button" value="开始抖动" onclick="nn.start()" /></div> <div><input type="button" value="停止抖动" onclick="nn.stop()" /></div> <div id="test"></div> </div> <script type="text/javascript"> var m=document.getElementById("test"); var nn=new SKclass(m,20,50); function SKclass (obj,Rate,speed) { var oL=obj.offsetLeft; var oT=obj.offsetTop; this.stop=null; this.oTime=null; this.state=0; var om=this; this.start=function(){ if(this.state==0){ ostart(); this.state=1; } } var ostart=function(){ if(parseInt(obj.style.left)==oL-2){ obj.style.top=oT+2+"px"; setTimeout(function(){obj.style.left=oL+2+"px"},Rate) }else{ obj.style.top=oT-2+"px"; setTimeout(function(){obj.style.left=oL-2+"px"},Rate) } om.oTime=setTimeout(function(){ostart()},speed); } this.stop=function(){ clearTimeout(om.oTime); this.state=0; } } </script>
2011-02-09 19:22:02

这个很像QQ的震动效果,应该是你想要的,而且代码很简单 

<img id="win" style='position:relative' src="http://www.jb51.net/upload/20080907101743898.jpg" onmouseover="zd()"> <script > function zd(u){ var a=['top','left'],b=0; u=setInterval(function(){ document.getElementById('win').style[a[b%2]]=(b++)%4<2?0:4; if(b>15){clearInterval(u);b=0} },32) } </script>
2011-02-09 20:48:26

可以使用JQuery第三方插件jrumble来实现,它可以让页面任一个元素实现抖动效果: 

<script type="text/javascript" src="js/https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script> // Initialize jRumble on Selector $('#rumble-element').jrumble(); // Start rumble on element $('#rumble-element').trigger('startRumble'); // Stop rumble on element $('#rumble-element').trigger('stopRumble');

参考资料:jRumble | A jQuery Plugin That Rumbles Elements

2011-02-09 22:04:48

下面这个完全可以满足的你的需求: 

<img src="你的图片url" onMouseover="shake(this,'onmouseout')" > <script type="text/javascript"> var typ = ["marginTop","marginLeft"],rangeN=10,timeout=20; function shake(o,end){ var range=Math.floor(Math.random()*rangeN); var typN=Math.floor(Math.random()*typ.length); o["style"][typ[typN]]=""+range+"px"; var shakeTimer=setTimeout(function(){shake(o,end)},timeout); o[end]=function(){clearTimeout(shakeTimer)}; } </script>
2011-02-09 17:54:51
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制