JS实现鼠标指向图片抖动代码

最新推荐文章于 2022-03-04 11:40:29 发布
最新推荐文章于 2022-03-04 11:40:29 发布
阅读量180 收藏 1
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/webdm/archive/2011/12/23/2299197.html
版权

代码简介：

一款比较平滑的图片抖动特效，鼠标放到图片上触发JS函数，记得QQ聊天有一个窗口抖动效果，和这个类似，很可爱。

代码内容： 

View Code 
<!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>
<title>JS实现鼠标指向图片抖动代码 - www.webdm.cn</title>
<style>
.shakeimage{
position:relative
}
</style>
<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>
</head>
<body>
<img src=http://www.webdm.cn/themes/pic/webdm_logo.gif class="shakeimage" onMouseover="init(this);rattleimage()" 

onMouseout="stoprattle(this)">
<br>
鼠标放图片上看一下？？让我抖抖~
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！

</p>

 

代码来自：http://www.webdm.cn/webcode/1b240bf4-fd97-4143-8b95-7853aa255390.html

转载于:https://www.cnblogs.com/webdm/archive/2011/12/23/2299197.html

weixin_34329187
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js鼠标移上让图片抖动效果
10-24
鼠标移上让图片抖动效果...代码有注释 可以更改成文字抖动一些效果！
JS实现鼠标滑过图片的抖动效果
weixin_38166931的博客
04-16 570
在上网时候发现了这个效果（效果演示地址：http://www.baidu.com/search/baike/usertask/mingmantianxia/）.在鼠标放到图片上， 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。1、查看源文件，在查看后很纳闷的发现，此页并没有包含那些奖品信息。这样就断定代码在另一个页面中。于是想当然的以为是用的框架连接的地址。...
html震动效果,JS实现简单抖动效果
weixin_30920223的博客
06-04 788
废话不多说了，直接给大家贴代码了，具体代码如下所示：Title#div1 {width: 100px;height: 100px;position: absolute;left: 400px;top: 200px;background: red;}var div1 = document.querySelector('#div1');document.onclick = function () {/...
js鼠标指向显示
c230704的博客
06-22 853
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8” %> <%@ include file="/common/taglibs.jsp" %> <%--预约单 列表模式 cy--%> <!-- jsp文件头和头部 --> &...
鼠标感应图片应震动效果代码
zgqtxwd的专栏
05-01 328
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
jquery鼠标经过图片抖动效果特效代码
03-20
在"jquery鼠标经过图片抖动效果特效代码"这个主题中，我们将主要关注如何通过jQuery实现图片元素在鼠标悬停时产生晃动动画。 首先，要实现这个特效，我们需要引入jQuery库。这通常通过在HTML文档的`<head>`部分添加...
jquery鼠标经过图片抖动特效代码
03-20
在本文中，我们将深入探讨如何使用jQuery实现一种鼠标经过图片时产生抖动特效的技术。这种特效常见于现代网站，特别是那些包含相册或图片列表的界面，它能为用户提供更丰富的交互体验，增加视觉吸引力。 首先，...
鼠标经过抖动图片，点击显示大图
04-12
具体实现时，JavaScript代码可能在`mouseover`事件中修改图片的CSS类或属性，触发CSS动画；`click`事件则可以加载大图或者打开新的视窗。同时，CSS文件会定义动画的具体效果，如持续时间、延迟、动画曲线等。这个...
jQuery方格抖动下拉导航特效代码
03-20
【jQuery方格抖动下拉导航特效代码】是一种利用jQuery库和CSS3技术构建的交互式网页导航菜单。这种特效使得导航菜单在鼠标悬停时呈现出方格抖动的效果，为用户提供了生动有趣的视觉体验，同时也增加了网站的交互性和...
jquery果冻抖动效果特效代码
03-20
在本示例中，"jquery果冻抖动效果特效代码"是一个利用jQuery创建的互动特效，它能够让元素在用户的鼠标操作下产生如同果冻般的抖动效果，增加了用户界面的趣味性和互动性。 首先，我们要理解“果冻抖动”（Jelly ...
jQuery仿QQ窗口抖动(图片抖动)代码
08-09
jQuery仿QQ窗口抖动，点击网页上的图片后，图片疯狂抖动，适用的浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
jQuery文字图片抖动效果代码.zip
05-25
jquery文字图片抖动效果代码基于jquery.1.7.2.min.js插件制作，多种文字图片抖动特效，包括慢抖、小抖、水平抖动、垂直抖动、旋转抖动、不透明抖动、疯狂抖动等共8种文字图片抖动效果。
图片抖动特效
02-02
非常酷炫的图片抖动特效，非常好用，非常好看，非常实用，不下不知道，一用吓一跳
HTML图片抖动效果
12-15
HTML页面效果 鼠标移入，图片抖动效果。
html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法
weixin_31597759的博客
05-31 1048
本文实例讲述了js实现鼠标触发图片抖动效果的方法。分享给大家供大家参考。具体实现方法如下：鼠标触发图片抖动效果.shakeimage{position:relative}//configure shake degree (where larger # equals greater shake)var rector=3///////DONE EDITTING///////////var stopit...
js 图片跟随鼠标移动
weixin_45893243的博客
08-01 242
叒叒叒是pink老师的课里讲了一个非常有意思的案例 图片可以跟着鼠标移动 主要是添加一个mousemove的监听事件 实时获取鼠标的坐标 同时改变图片的坐标 html <img src="gif.gif" alt="" style="position: absolute;"> //位置要为绝对 才能不占用位置 js <script> var pic = document.querySelector('img') document.addEventListener('mou
实现百度的鼠标移入图片抖动的特效(提供步骤和源码)
weixin_33924770的博客
09-15 238
　　今天无聊，在上网时候发现了这个效果（效果演示地址：http://www.baidu.com/search/baike/usertask/mingmantianxia/）.     　　在鼠标放到图片上， 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。 　　 　　1。查看源文件，在查看后很纳闷的发现，此页并没有包含那些奖品信息。这样就断定代码在另一个页...
【JS案例】图片跟随鼠标指针移动
weixin_49667641的博客
03-04 565
原理： 前提：图片的采用绝对定位（即：position：absolute）为窗口对象window绑定鼠标移动事件，利用事件处理函数中的反馈对象来获得位置信息，利用这个信息再改变图片位置 效果： 就是鼠标到哪图片到哪 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
控制鼠标抖动的代码
最新发布
05-26
以下是使用Python实现控制鼠标抖动的示例代码： ```python import pyautogui import time import random # 模拟鼠标抖动 def move_mouse(): # 随机生成鼠标移动的距离和方向 offset_x = random.randint(-50, 50) offset_y = random.randint(-50, 50) # 移动鼠标 pyautogui.moveRel(offset_x, offset_y, duration=0.1) # 控制鼠标随机抖动 while True: move_mouse() # 随机等待一段时间 time.sleep(random.uniform(1, 5)) ``` 该代码使用了pyautogui库来模拟鼠标移动，通过调用moveRel()方法控制鼠标移动的距离和方向。在while循环中不断调用move_mouse()方法实现鼠标的随机抖动，并且加入了随机等待时间的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值