鼠标特效

方法一,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标跟随效果</title>
<style>
body {
margin: 0;
padding: 0
}

#to_top {
width: 30px;
height: 40px;
padding: 20px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: absolute;
cursor: pointer;
color: #fff
}
</style>
<script>
window.onload = function() {
var oTop = document.getElementById("to_top");
document.onmousemove = function(event) {
var oEvent = event || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + scrollleft + 10 + "px";
oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
}
}
</script>
</head>

<body style="height:1000px;">
<a href="#">欢迎观看!</a>
<div id="to_top">鼠标跟随</div>
</body>

</html>



鼠标特效

原文地址:https://www.cnblogs.com/ECJTUACM-1435867846/p/11810787.html

时间: 2024-10-31 03:44:57

鼠标特效的相关文章

实用的JavaScript鼠标特效

JS代码使鼠标滚轮失效 1 当页面内容太多时,可以通过鼠标滚轮实现翻页效果.但有些读书网站提供页面自动滚屏的功能,此时可使鼠标的滚轮失效,让用户充分体验网站提供的功能. 本例在页而中添加了一个表格,可将窗口缩小,以出现滚动条效果.当出现滚动条时.滑动鼠标的滚轮,测试此操作是否能够成功.代码重写了“document.onmousewheel”方法,若返回false值则表示不执行任何鼠标滚动的操作. 2 实例代码如下: <html xmlns="http://www.w3.org/1999/x

JavaScript特效源码(4、鼠标特效)

1.鼠标感应--渐现特效 鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head>之间: <script language="JavaScript1.2"> function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.

鼠标特效测试

<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?",&

javascript实例——鼠标特效篇(包含1个实例)

鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星 如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小.根据书上的代码做了一些修改.比如,如果用户不移动鼠标,是不会显示星星效果的:其次就是将源代码中的亮度调节等去掉了,因为效果并不是很明显.截了三幅图,黑点近似代表鼠标的位置.效果图如下: 源代码: <html> <head> <title> Twinkle stars <

Web前端:博客美化:二、鼠标特效

1.获取JS权限 因为是js代码所以需要放在 侧边栏公告 里 没开通之前,有一个申请的链接,点击即可,我是第二天才看到过审的 ^-^ 2.Ctrl+C.Ctrl+V 数组里的文字随自己心情啦 另:3000是文字消失的速度,数值越大跑的越慢 <!--鼠标点击特效--> <script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { $("body&qu

一些常用的鼠标特效

onclick: 鼠标单击触发 ondblclick: 双击触发 onmouseover: 鼠标移动上面触发 onmouseout: 鼠标离开时触发 onmousemove: 鼠标在上面移动时触发 onchange: 只要内容改变触发 onblur: 失去焦点时触发 onfocus: 获得焦点时触发 onkeydown: 按键按下的时候触发 onkeyup:按键抬起来的时候触发 onkeypress:事件在用户按下并放开任何字母数字键时发生.但是系统按钮(例如:箭头键.功能键)无法得到识别.

鼠标特效-让鼠标滑轮失效

<!DOCTYPE html><html>    <head>        <title>让鼠标滑轮失效</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>        <script type="text/javascript">      

精美js鼠标特效代码跟随

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>精美js鼠标跟随代码</title></head><body><script> A=document.getElementByIdB=document.all;C=document.layers;

有趣的js(鼠标特效)

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Document</title> </head> <body> <script type="text/javascript"> !f