js实现鼠标移入移出小特效!

最新推荐文章于 2024-04-26 18:01:53 发布
最新推荐文章于 2024-04-26 18:01:53 发布
阅读量2.1k 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39588041/article/details/75911686
版权
<html>
<head>
<style>
    ul{margin: 0; padding: 0; list-style: none;  text-align: center; line-height: 30px;}
    .wap{ width: 80px; height: 30px; border: #333 solid 1px; position: relative;}
    .wap a{line-height: 30px; display: block; text-decoration: none; color :#000; background: #f1f1f1;}
    .ull {width:140px; border: #333 solid 1px; position: absloute; top: 30px; left: -1px; background: #FF9; display: none;}
</style>
</head>
<body>
 <ul>
   <li id="list" class="wap">
        <a href="#" id="link">微博</a>
   <ul id="ull">
        <li>私信</li>
        <li>评论</li>
        <li>@我</li>
   </ul>
   </li>
 </ul>

 <script>

    var li = document.getElementById('list')  /*

    var ul = document.getElementById('ul')      声明，简化代码。

    var a = document.getElementById('link') */

    document.getElementById('list').onmouseover = abc; //当鼠标移入命令命名  li .onmouseover = abc;
    document.getElementById('list').onmouseout = cba;  //当鼠标移出命令命名   li.onmouseover =  cba;
    function abc(){ //函数、作用 
        document.getElementById('ull').style.display = 'block'; //找到微博下方<li>标签里的元素，并显示出来。 ul.style.display = 'block';
        document.getElementById('link').style.background = 'yellow'; //当鼠标移入指向“微博”改变背景颜色。    a.background = 'yellow';
    }
    function cba(){
        document.getElementById('ull').style.display = 'none';  //找到微博下方<li>标签里的元素，并隐藏。  ul.style.display = 'none';
        document.getElementById('link').style.background = 'f1f1f1'; //当鼠标移出“微博”还原背景颜色。      a.style.background = 'f1f1f1';

    }

/*  采用匿名函数简化代码最终效果！

  window.onload = function () {

  var li = document.getElementById('list');

  var ul = document.getElementById('ull');

  var a = document>getElementById('link');

  li.onmouseover = function () {

     ul.style.display = 'block';

     a.background = 'yelow';

   }

  li.onmouseout = function () {

    ul.style.display = 'none';

    a,style.background = 'f1f1f1';

   }

}

*/

 </script>
</body>
Inferno磊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《HTML鼠标移入特效》
qq_44894205的博客
10-25 1951
方向与未来 作为一个软件开发工程师应该时刻清楚明白自己的方向，把握好方向未来就是美好的，选择一个一生所要追求的事业做出成绩让其他人去认可你 劳逸结合保持兴趣 过度的学习或许会让你失去自己的思维能力，因此应该合理安排学习与工作与休息，过度的学习后会产生精神疲劳，再去开发项目容易思维混乱缺乏自己的思维能力，所以需要适当去学 ...
鼠标移入效果制作
weixin_57762662的博客
10-28 816
打开DW，按下CTPL+N键新建一个HTML文档。 我们先在body标签打上ul标签，再在ul标签打上li标签和a标签，a标签里写一些内容。 在title标签下打一个style标签，然后在style标签里设置背景宽高，字体大小，背景颜色颜色，外右边距和居中。 下图是以上代码效果 接下来我们把li标签里的a标签给去了。 最后我们为li设置一个鼠标移入的样式，我们用（:hover）来设置鼠标移入的样式，我们可以设置自己喜欢的颜色和样式；这里我将li标签的移入效果写为了背
通过鼠标移入移出增加页面交互效果
最新发布
David_house的博客
04-26 394
有时候希望给用户带来一些炫酷的交互体验，常常会通过鼠标触发一些动态的样式效果！！！这里简单总结一下，以后会不定时补充，谨以此博客作为记录！
鼠标移到DIV上特效
10-18
鼠标移到DIV上特效,鼠标移到DIV上特效，鼠标移到DIV上特效
js鼠标移入移出效果【原】
weixin_30662109的博客
03-17 141
<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <meta http-equiv="content-Type"content="text/html;charset=utf-8"> <TITLE>js鼠标移入移出效果&...
JS鼠标移入移出,JS中的this,表格移动鼠标换色/全选反选全不选
qq_44063001的博客
02-20 227
鼠标移入移出 &amp;amp;amp;amp;lt;script type=&amp;amp;amp;quot;text/javascript&amp;amp;amp;quot;&amp;amp;amp;amp;gt; //加载事件绑定的函数 function init(){ //获取各自的标签 var testElement=document.getElementById(&amp;amp;amp;quot;text&amp;a
jQuery实现鼠标移入移出事件切换功能示例
12-08
在本文中，我们将深入探讨如何使用jQuery来实现鼠标移入移出事件的切换功能。首先，让我们了解一下jQuery库以及它如何处理DOM元素的事件。 jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM（Document ...
js 实现 checkbox鼠标移入移出的特效
03-31
js 实现 checkbox鼠标移入移出的特效值得下载看看!资源免费,大家分享!!
jQuery鼠标移入抖动变形特效
06-24
在本文中，我们将深入探讨如何使用jQuery和HTML5 Canvas实现一款独特的鼠标移入抖动变形特效。这个特效在用户将鼠标悬停在HTML元素上时，可以为元素的边框创造出波浪般的抖动视觉效果，增加了交互性与趣味性。 首先...
jQuery九宫格鼠标移入方向感知特效
06-01
在本文中，我们将深入探讨如何使用jQuery来实现一个九宫格布局，并且具有鼠标移入时感知方向并显示遮罩层文字内容的特效。这个特效为网页增添互动性，提升了用户体验，尤其适用于产品展示或者相册类应用。 首先，...
jQuery鼠标移入抖动变形特效.zip
07-11
《jQuery鼠标移入抖动变形特效的实现与解析》 在网页设计中，动态效果的运用可以提升用户体验，增加互动性。"jQuery鼠标移入抖动变形特效"就是这样一种技术，它利用HTML5的canvas元素和jQuery库，为网页元素在鼠标...
各种鼠标移入效果
11-25
插件描述：各种鼠标移入效果. 参考示例：http://www.jq22.com/jquery-info4782
js 实现 鼠标移入移出时颜色变化
03-31
js 实现 鼠标移入移出时颜色变化! 值得下载看看!资源免费,大家分享!!
图片特效展示（鼠标移入移除特效）
且听风吟
12-19 2209
太久没动手了，又断续复习一些以前学过的东西。今天我写的是一个图片展示特效。鼠标onmouseover图片的时候，介绍缓慢出现；移除时候介绍回到原位。代码如下：          图片展示特效              *{margin:0;padding: 0;}         #picList{width:1300px;margin:100px auto;}       
纯 css - 当鼠标移入 img 头像悬浮、悬停特效动画效果（头像从一个圆圈或洞里伸出来的效果）详细示例源码
高级前端工程师
02-08 2163
vue项目鼠标移入图片 如何让头像图片悬浮一下css前端酷炫的图像悬停特效css悬停圆形头像旋转效果一个炫酷的头像悬停效果CSScss悬停圆形头像旋转效果特效--图像悬停效果炫酷,CSS 实现一个3D图像悬停效果用vue实现,鼠标悬停放大图片最好的鼠标移入头像出现悬浮特效动画的文章Vue鼠标悬停图片放大倾斜动画特效炫酷,CSS 实现一个3D图像悬停效果CSS3悬停效果CSS图片响应悬停效果css3悬停图片特效css悬停圆形头像旋转效果源码示例
前端:运用html+css+js模仿百度热搜电影榜鼠标移入特效
坚持不懈的大白的博客
07-24 1682
百度热搜上电影榜鼠标移入特效如上图所示。个人觉得上述特效实现原理为使用相对定位、绝对定位实现的(鼠标移入和没有移入时，元素布局有一些不同而已)。至于鼠标移入时，出现延迟效果，则是在css上设置transition(用于设置过渡效果的)实现的。我的实现效果如下(只把那个特效实现，其他元素布局没有搞)
鼠标经过特效
你好！刘斩仙
10-24 753
鼠标经过小特效<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> li{ list-style: none; width: auto;
javascript 侧边栏一键分享移入移出效果
青天诀的专栏
11-21 1459
运动框架： 先要清除定时器，防止多次点击或者移入移出时，开启多个定时器，元素的运动会是所有定时器中运动的总和当达到目的时，要清除定时器（使用if/else 实现） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> N
JavaScript处理鼠标各个事件的示例代码、说明和案例
qq_43326668的博客
05-25 3750
以上示例代码演示了如何在HTML中使用JavaScript处理常见的鼠标事件，并给出了每个事件的使用方法、作用和常见使用案例。常见使用案例：在网页中的拖拽功能或按住按钮进行连续操作时，通过监听鼠标松开事件来触发相应的逻辑处理。常见使用案例：在网页中的图片上，当用户将鼠标移出图片区域时，恢复图片的原始样式或显示其他相关信息。常见使用案例：在网页中创建一个按钮，当用户点击按钮时触发相应的操作，例如提交表单、打开弹窗等。常见使用案例：在网页中的游戏或交互界面中，当用户按下特定按钮时触发相应的游戏操作或界面切换。
javascript 实现网页广告特效
09-28
3. 监听事件：可以为广告元素添加鼠标移入、移出、点击等事件的监听器，通过 JavaScript 代码响应用户的交互。比如，当鼠标移入广告元素时，可以改变广告的透明度或显示其他相关信息。 4. 广告点击跳转：可以为广告...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值