流行的鼠标悬停效果

最新推荐文章于 2023-05-11 10:14:51 发布
最新推荐文章于 2023-05-11 10:14:51 发布
阅读量272 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmw773034423/article/details/8439499
版权

<body>
<DIV id=fontDiv style="POSITION: absolute; Z-IndEX: 1"></DIV>
<SCRIPT language=JavaScript>
<!--
var fcolor = "ffffff";      
var backcolor = "#888888";
var textcolor = "#336699"; 
var border = "1"; 
var width= "170" 
var offsetx = 10; 
var offsety = 10;
ns4 = (document.layers)? true:false   
ie4 = (document.all)? true:false  
if (ie4) {
 if (navigator.userAgent.indexOf('MSIE 5')>0) {
  ie5 = true;
 } else {
  ie5 = false; }
} else {
 ie5 = false;
}
var x = 0;              
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
if ( (ns4) || (ie4) ) {
 if (ns4) over = document.fontDiv
 if (ie4) over = fontDiv.style
 document.onmousemove = mouseMove
 if (ns4) document.captureEvents(Event.MOUSEMOVE)
}

function nd() {           
 if ( cnt >= 1 ) { sw = 0 };
 if ( (ns4) || (ie4) ) {
  if ( sw == 0 ) {
   snow = 0;
   hideObject(over);
  } else {
   cnt++;
  }
 }
}

function onmover(text) {        
 txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD CLASS=P1><FONT FACE=\"宋体\" COLOR=\""+textcolor+"\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
 layerWrite(txt);
 disp();
}

function disp() {
 if ( (ns4) || (ie4) ) {
  if (snow == 0)  {
   moveTo(over,x+offsetx,y+offsety);
   showObject(over);   
   snow = 1;
  }
 }
}

function mouseMove(e) {  
 if (ns4) {x=e.pageX; y=e.pageY;}
 if (ie4) {x=event.x; y=event.y;}
 if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
 if (snow) {
  moveTo(over,x+offsetx,y+offsety);
 }
}

function layerWrite(txt) {      
        if (ns4) {
                document.fontDiv.document.write(txt)
                document.fontDiv.document.close()
        }
        else if (ie4) document.all["fontDiv"].innerHTML = txt
}

function showObject(obj) {  
        if (ns4) obj.visibility = "show"
        else if (ie4) obj.visibility = "visible"
}

function hideObject(obj) {    
        if (ns4)
         obj.visibility = "hide"
        else if (ie4)
         obj.visibility = "hidden"
}

function moveTo(obj,xL,yL) {  
        obj.left = xL
        obj.top = yL 
}
//-->
</SCRIPT>
<INPUT οnmοuseοut="nd();" οnmοuseοver="onmover('您可以看到你十分需要的javascript特效！');" type=button value="鼠标旋停到按钮时的效果">
</body>

lmw773034423
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
易语言文字跟随鼠标
08-16
文字跟随鼠标 系统结构:文字跟随鼠标,取消文字跟随,走,改变父窗口,取窗口位置, ======程序集1 | | | |------ _启动子程序 | | | |------ _临时子程序 | | | | ======_接口程序集 | | | |------ 文字跟随
JS 用JS实现跟随光标的提示
05-11 155
自己做了个JS文件，将JS导入到文件中，在要显示提示的标签上加入hint=“提示内容”，运行时就可显示提示 //页面元素提示框 var tishi = null; document.onmousemove=function(){ //判断页面元素中是否已经创建过div，没有则创建，有则不创建 if(!tishi){ //创建div标签元素 tishi = doc...
前端浮动div随鼠标点击跟随
weixin_51111241的博客
05-11 300
/ 调整宽度和高度。//模板生成新任务行。
纯JS实现鼠标划过时显示提示框
12-27
js提示框特效制作多种js提示框效果,如js文字提示框,js图片提示框,js tooltip文字与图片提示框。一款很实用的js提示框插件。
jquery鼠标悬停动画效果
06-10
本教程将深入讲解如何使用jQuery来创建一个鼠标悬停时的动画效果，具体表现为当鼠标移到图片上方时，小图片会缓缓向上移动并最终静止。 首先，我们需要在HTML文件中引入jQuery库。这可以通过在头部添加CDN链接或者...
玻璃拟态3d卡片鼠标悬停效果.rar
10-01
【标题】"玻璃拟态3D卡片鼠标悬停效果"是一种流行且现代的网页设计技术，它结合了jQuery和CSS特效来实现动态的用户交互体验。这种效果在鼠标悬停时，使网页元素（如卡片）呈现出类似玻璃的透明度和3D立体感，增加...
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
12-12
鼠标跟随悬停效果教程，话说以前看到这个很流行呢。 查看演示 Css3 Hover Effects With Websymbols Tutorial（教程） 查看演示 Magnifying Glass For Image Zoom Using Jquery And CSS3 通过Jquery 和 CSS3.实现...
Bootstrap鼠标悬停图片遮罩特效
06-16
为了实现悬停效果，我们可以用CSS来控制遮罩层的显示和隐藏。以下是一个简单的HTML示例： ```html 你的图片URL" class="figure-img img-fluid rounded" alt="图片描述"> 悬停时显示的信息或操作按钮 ...
jQuery控制表单输入框鼠标悬停提示效果
05-15
以上就是利用jQuery实现表单输入框鼠标悬停提示效果的基本步骤。在实际项目中，你可能需要根据具体需求调整代码，例如改变提示框的样式、延迟显示或消失时间等。通过这种方式，你可以创建出更直观、更具交互性的Web...
DW如何制作鼠标经过时图片放大效果示例教程
09-24
在一些商城的商品展示页面里，经常有当鼠标放到图片上的时候，图片就会放大，当鼠标离开图片的时候，图片就恢复到原来的大小，这种效果就是给图片添加了onmouseover行为，详细制作过程请看中文！
jQuery浮动层 jQuery实现div跟着鼠标走
08-03
用jQuery实现div跟着鼠标走 鼠标移动时，层也跟着鼠标的移动而移动
js实现的点线随鼠标移动聚集和散开的窝巢特效
12-08
一个基于canvas绘制的光标线条粒子组合动态网页背景效果。点线随鼠标移动聚集和散开，呈现窝巢状网页背景效果。
html 鼠标悬停效果,30个帅气的鼠标悬停效果
weixin_35256923的博客
06-03 4433
30个帅气的鼠标悬停效果3月 26, 2015评论 (1)Sponsor在网页设计中，鼠标悬停效果常用于文字链接、产品图片、按钮等地方，然而随着CSS3的强大，鼠标Hover效果可以变得有更多玩法，实现很多以前用FLASH或Javascript才能实现的效果，而且比起前两者，用CSS代码则更容易实现！今天我们整理30个帅气的鼠标悬停效果，每个动画都很有新意，喜欢的可以从中体验一下，而且还可以尝试用...
JQ浮动元素跟随鼠标移动
桃树林
05-08 1261
&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;style type="text/css"&gt;            body{margin:0;}            #aa{width:
鼠标跟随效果的实现
车联网开发的博客
08-12 957
本篇博客涉及的技术栈包括事件对象、缓动学公式的应用相对比较简单 代码如下 &lt;!DOCTYPE html&gt; &lt;!--create by ydj on 2018-08-12--&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
js实现跟随鼠标移动的提示框
pengzihui的博客
03-15 1627
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{width: 300px;height: 40px;background: #ccc;margi...
Bootstrap3 带悬停效果的表格样式
歪脖先生的博客
05-05 2731
带悬停效果的表格 为 <table> 添加 .table-hover 类，就可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。当鼠标经过数据行时，会为该行添加浅灰色背景。如： <tableclass="table table-hover"> <thead> <tr> <th&gt...
dreamweaver鼠标悬停图文动画
最新发布
04-02
2. 添加CSS样式：使用CSS样式来定义鼠标悬停时的效果。可以使用:hover伪类选择器来设置鼠标悬停时的样式，比如改变背景颜色、字体颜色等。 3. 添加JavaScript代码：使用JavaScript来实现鼠标悬停时的动画效果。可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值