`
天梯梦
  • 浏览: 13772964 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论
阅读更多
<!--图片地址,请您自己更改!-->
<img src="http://www.qqbye.com/wawa/UploadFiles_3996/200807/2008071904350239_S.jpg" style="position:relative;" onMouseOver="init(this);rattleimage()" onMouseOut="stoprattle(this)" />
<script language="JavaScript">
var rector=3; // 抖动的幅度
var stopit=0;
var a=1;
 
function init(which){
stopit=0;
shake=which;
shake.style.left=0;
shake.style.top=0;
}
 
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50) // 抖动的频率
}
 
function stoprattle(which){
stopit=1;
which.style.left=0;
which.style.top=0;
}
 
</script>
 

图片和浏览器的抖动

 

<style>
	#qq{position:relative;}
</style>

<script>
	mfx = function(isWin){
		var t = 0,z = 3,del = function(){clearInterval(mfx.ID);return mfx};
		del().ID = setInterval(function(){
			var i = t/180*Math.PI,x = Math.sin(i)*z,y = Math.cos(i)*z,s = qq.style;
			isWin ? window.moveBy(x,y) : (s.top=x+'px',s.left=y+'px');
			if((t += 90) > 1080)del();
		},30);
	}
</script>

<button onclick="mfx()">QQ</button>
<button onclick="mfx(1)">browser</button>
<img id="qq" src="http://dl.iteye.com/upload/picture/pic/57029/fe8a74ac-add2-396d-a298-2954c162bfe7.gif"  />
 

 

 

 

分享到:
评论

相关推荐

    js鼠标移上让图片抖动效果

    在JavaScript中实现“鼠标移上让图片抖动效果”是一种常见的动态交互设计,可以增加用户与网页元素的互动性。这种效果通常是通过CSS和JavaScript配合完成的,下面将详细介绍实现这个功能所需的知识点。 首先,我们...

    unity ugui/ngui图片抖动shader

    在这个场景中,"图片抖动shader"是一个特定的Shader应用,用于实现图片的动态抖动效果,增加视觉吸引力或模拟某些特殊情境,如紧张、不稳定或振动。 首先,我们来理解一下如何通过UV偏移实现图片抖动。在3D图形学中...

    jquery文字图片抖动效果代码

    "jQuery文字图片抖动效果代码"是一个实现这种视觉特效的资源,它利用jQuery库来创建文字和图片的抖动动画。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得开发者能够更...

    jQuery文字图片抖动效果代码.zip

    "jQuery文字图片抖动效果代码.zip"是一个集合,提供了使用jQuery库实现的多种文字和图片抖动特效。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务,使得开发者能够更...

    文字和图片抖动提醒demo

    【文字和图片抖动提醒demo】是一个Android应用的示例项目,主要展示了如何在移动设备上实现文字和图片的动态抖动效果,以达到吸引用户注意力或者作为通知提醒的目的。这个项目对于Android开发者来说,是一个很好的...

    简单的jquery鼠标经过图片抖动效果代码

    总结一下,实现这个简单的jQuery鼠标经过图片抖动效果,我们需要以下步骤: 1. 在HTML中设置图片元素,并为它添加一个唯一的ID。 2. 引入jQuery库。 3. 使用jQuery的`hover`方法绑定鼠标经过和离开的事件处理函数。 ...

    jquery鼠标经过图片抖动.zip

    "jquery鼠标经过图片抖动.zip"是一个包含jQuery实现的特效,当用户将鼠标悬停在图片上时,图片会产生抖动效果,这种效果常用于增加网页的互动性和趣味性,尤其适用于图片相册或展示类网站。 这个特效的核心是利用...

    html5 CSS3鼠标悬停图片抖动.rar

    html5 CSS3鼠标悬停图片...将本效果放在图片列表中比较合适,比如购物网站的产品图片列表、企业网站的产品中心列表、文章资讯站的推荐图文列表,都可以加入这种图片抖动效果,会让访问者感觉网站的灵动,而且不张扬。

    jquery图片抖动

    本篇文章将深入探讨如何使用jQuery实现“图片抖动”这一动态效果,包括悬停图片抖动和点击按钮触发图片抖动两种情况。 首先,我们需要理解jQuery的基本用法。jQuery对象通常通过$符号创建,它可以用来选择页面中的...

    css3鼠标悬停图片抖动效果

    一款纯css3实现的图片抖动效果 附件提供了多种图片抖动样式 喜欢的懒人可以自己试着下载使用,或者学习 使用方法: 1、将css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (图片...

    图片抖动特效

    在IT行业中,图片抖动特效是一种常见的视觉效果,通常用于增强网页或应用程序的互动性和吸引力。这个特效结合了HTML、H5(HTML5)、JavaScript(JS)和CSS(层叠样式表)技术来实现,使得图片能够按照预设的方式动态...

    HTML图片抖动效果

    在实现图片抖动效果时,我们通常会用到`&lt;img&gt;`标签来插入图片,如下所示: ```html 图片描述"&gt; ``` 这里的`src`属性指定了图片的URL,`alt`属性提供了图片的文字描述,对搜索引擎优化和无障碍访问非常重要。 接...

    非常好的asp图片抖动代码

    在ASP中处理图片抖动,主要是通过JavaScript或VBScript等客户端脚本语言实现,或者是通过服务器端的编程来模拟图片的动态效果。本文将深入探讨ASP图片抖动代码的相关知识点。 首先,图片抖动效果通常是通过改变图片...

    iOS 图片抖动算法,用于黑白或者黑白红、黑白黄三色墨水屏

    在iOS应用中,你可以用这种抖动算法来处理用户上传的图片,使其适应黑白或有限颜色的墨水屏显示。此外,它也可以用于创建具有独特视觉风格的艺术效果,或者在资源有限的设备上优化图像质量。 总的来说,这个项目...

    jquery鼠标经过图片抖动效果.zip

    本示例"jquery鼠标经过图片抖动效果.zip"提供了一种交互式的图片特效,即当鼠标悬停在图片上时,图片会产生抖动效果,为网页增添动态趣味性。这个效果尤其适用于制作动态导航、吸引用户注意力或者增加网站的互动体验...

    百度鼠标经过图片抖动javascript效果

    在JavaScript的世界里,实现动态效果是一项常见的任务,而“百度鼠标经过图片抖动效果”就是一个典型的交互式用户体验增强技术。这种效果通常是通过监听鼠标的hover事件来触发,使得用户在鼠标悬停在图片上时,图片...

    核心动画之图片抖动

    本示例“核心动画之图片抖动”聚焦于如何利用CAKeyframeAnimation类来实现图片的抖动效果。这个demo展示了如何通过编程方式控制视图的行为,而非依赖于UIKit的简单动画。 首先,CAKeyframeAnimation是Core ...

    div css3 transform旋转变形属性制作新浪微博图片抖动

    本文将深入探讨如何利用CSS3的transform属性中的rotate方法来实现一个类似“新浪微博图片抖动”的视觉效果。 首先,我们需要了解`transform: rotate()`这个属性。它用于设置元素的旋转角度,语法是`transform: ...

    java j2me上的图片抖动效果 特效

    实现图片抖动特效的关键在于对图片的位置进行动态调整。在Java J2ME中,我们通常会使用GIF89a或者PNG格式的图像资源,因为它们支持透明度并且文件大小相对较小,适合在移动设备上使用。图片资源通常会被存储在`res`...

Global site tag (gtag.js) - Google Analytics