`

鼠标经过图片晃动效果

 
阅读更多 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>鼠标经过图片晃动效果</title>
<style>
.shakeimage{position:relative}
</style>
</head>

<body>
<img src="http://www.szrgb.net/szrgb/images/logo.jpg" class="shakeimage" onMouseOver="init(this);rattleimage()" onMouseOut="stoprattle(this)">

<script language="JavaScript1.2">
	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>
</body>
</html>
分享到：
| CSS和JS标签style属性对照表
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery图片跟随鼠标晃动效果

    "jquery图片跟随鼠标晃动效果"是一个基于jQuery库实现的特效，旨在为用户提供一种新颖的交互方式，使图片在鼠标移动时产生动感十足的视觉体验。这个特效由韩雪冬工作室开发，因其精美的设计和出色的动态性能，受到了...

    Dreamweaver怎么制作鼠标经过图片晃动的效果?

    实现鼠标经过图片晃动效果的基本步骤如下： 1. 选取对象：首先需要选中你希望添加晃动效果的图片。在设计视图中点击图片，确保它被选中。 2. 添加动作：点击“窗口”菜单中的“行为”选项，打开行为面板。然后点击...

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

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

    EasyZoom— —图片跟随鼠标晃动插件

    EasyZoom插件通过监听鼠标的移动事件，实时调整图片的放大区域，从而达到“跟随鼠标晃动”的效果。它通常会创建一个浮动的放大镜或者放大区域，当鼠标移动到图片上时，这个区域会显示图片的放大视图。有两种常见的...

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

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

    JS实现图片响应鼠标移动剧烈晃动效果（重影）源码.zip

    这个"JS实现图片响应鼠标移动剧烈晃动效果（重影）源码.zip"压缩包提供的就是一个使用JavaScript实现的有趣交互功能，即当鼠标在图片上快速移动时，图片会产生剧烈晃动的重影效果。这个效果可以通过JavaScript的事件...

    跟随鼠标晃动带视差特效3D火焰canvas动画.zip

    这篇内容将深入解析"跟随鼠标晃动带视差特效3D火焰canvas动画"这一主题，主要涉及JavaScript特效、HTML5 Canvas技术和视差滚动效果。在Web开发中，这些技术为网页带来生动、交互性强的用户体验。 首先，让我们来...

    html 网页图片晃动代码

    在实际网页设计中，图片晃动效果可以用于吸引用户的注意力，特别是在产品展示、广告横幅或者游戏界面等场景下。例如，一个电商网站可能希望其商品图片在用户滚动浏览时轻微晃动，以此增加商品的吸引力。 然而，值得...

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

    html5 CSS3鼠标悬停图片抖动，鼠标放在图片上，图片会抖动几下，在支持HTML5浏览器中有最佳效果。将本效果放在图片列表中比较合适，比如购物网站的产品图片列表、企业网站的产品中心列表、文章资讯站的推荐图文列表...

    jquery鼠标经过图片抖动效果特效代码

    在"jquery鼠标经过图片抖动效果特效代码"这个主题中，我们将主要关注如何通过jQuery实现图片元素在鼠标悬停时产生晃动动画。 首先，要实现这个特效，我们需要引入jQuery库。这通常通过在HTML文档的`&lt;head&gt;`部分添加...

    基于Threejs的鼠标移动图片跟随变形动画特效

    【基于Threejs的鼠标移动图片跟随变形动画特效】是一个利用HTML5库Three.js实现的交互式视觉效果。Three.js是一个强大的JavaScript库，专门用于在Web浏览器中创建和展示3D图形，无需用户安装任何插件。它使得Web...

    jQuery背景图片跟随鼠标摆动动画特效

    综上所述，"jQuery背景图片跟随鼠标摆动动画特效"是一种利用jQuery实现的动态视觉效果，它通过监听鼠标移动并动态调整背景图片的位置，为网站增添活力和趣味性。在实际应用中，开发者可以根据需求调整动画的细节，以...

    TweenMax类实现图片跟随鼠标移动而变化

    在本场景中，我们关注的是如何利用TweenMax实现图片跟随鼠标移动而变化的效果。 首先，我们需要了解TweenMax的基本用法。TweenMax可以对任何数值属性进行动画处理，包括位置、颜色、大小等。它通过定义开始值、结束...

    jQuery鼠标拖动图片摇晃特效.zip

    本项目"jQuery鼠标拖动图片摇晃特效.zip"是利用jQuery来实现的一种独特视觉效果，当用户在网页上拖动鼠标时，图片会产生摇晃的动态效果，增加了用户的互动体验。 首先，我们来看这个特效的基本原理。在JavaScript中...

    纯js超酷弹性晃动效果的图片展示特效源码.zip

    6. **事件监听**：为了让图片在用户交互时启动晃动效果，如鼠标悬停、点击等，源码可能设置了事件监听器。例如，`addEventListener`函数可以用来捕捉和响应特定的用户行为。 7. **性能优化**：在处理大量图片或者...

    jQuery图片摇晃显示效果.zip

    在这个效果中，当鼠标悬停时，可能通过修改图片的`width`、`height`和`transform`属性来实现图片的放大，并通过改变`transform`实现摇晃效果。 4. **动画效果**：jQuery的`.animate()`方法可以创建平滑的过渡动画。...

    3D立体晃动图片特效.zip

    【3D立体晃动图片特效】是一种利用JavaScript技术来实现的动态视觉效果，它通过巧妙地操作和变换图片，使得图片在屏幕上呈现出立体晃动的效果，给人以深度和动感的视觉体验。这种特效通常用于网站设计，提升用户体验...

    Dreamweaver怎么给图片添加晃动效果?

    保存后，你可以使用Dreamweaver的“实时视图”或者在浏览器中预览页面，以查看图片晃动效果是否如预期。 请注意，虽然晃动效果可以吸引用户注意力，但过度使用可能会对用户体验造成负面影响，因此在设计时应适度...

Magicbox
Global site tag (gtag.js) - Google Analytics