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
    评论
专栏目录
纯 css - 当鼠标移入 img 头像悬浮、悬停特效动画效果（头像从一个圆圈或洞里伸出来的效果）详细示例源码
高级前端工程师
02-08 2166
vue项目鼠标移入图片 如何让头像图片悬浮一下css前端酷炫的图像悬停特效css悬停圆形头像旋转效果一个炫酷的头像悬停效果CSScss悬停圆形头像旋转效果特效--图像悬停效果炫酷,CSS 实现一个3D图像悬停效果用vue实现,鼠标悬停放大图片最好的鼠标移入头像出现悬浮特效动画的文章Vue鼠标悬停图片放大倾斜动画特效炫酷,CSS 实现一个3D图像悬停效果CSS3悬停效果CSS图片响应悬停效果css3悬停图片特效css悬停圆形头像旋转效果源码示例
《HTML鼠标移入特效》
qq_44894205的博客
10-25 1952
方向与未来 作为一个软件开发工程师应该时刻清楚明白自己的方向，把握好方向未来就是美好的，选择一个一生所要追求的事业做出成绩让其他人去认可你 劳逸结合保持兴趣 过度的学习或许会让你失去自己的思维能力，因此应该合理安排学习与工作与休息，过度的学习后会产生精神疲劳，再去开发项目容易思维混乱缺乏自己的思维能力，所以需要适当去学 ...
鼠标移入效果制作
weixin_57762662的博客
10-28 817
打开DW，按下CTPL+N键新建一个HTML文档。 我们先在body标签打上ul标签，再在ul标签打上li标签和a标签，a标签里写一些内容。 在title标签下打一个style标签，然后在style标签里设置背景宽高，字体大小，背景颜色颜色，外右边距和居中。 下图是以上代码效果 接下来我们把li标签里的a标签给去了。 最后我们为li设置一个鼠标移入的样式，我们用（:hover）来设置鼠标移入的样式，我们可以设置自己喜欢的颜色和样式；这里我将li标签的移入效果写为了背
通过鼠标移入移出增加页面交互效果
最新发布
David_house的博客
04-26 400
有时候希望给用户带来一些炫酷的交互体验，常常会通过鼠标触发一些动态的样式效果！！！这里简单总结一下，以后会不定时补充，谨以此博客作为记录！
鼠标移到DIV上特效
10-18
鼠标移到DIV上特效,鼠标移到DIV上特效，鼠标移到DIV上特效
js鼠标移入移出效果【原】
weixin_30662109的博客
03-17 143
<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
图片特效展示（鼠标移入移除特效）
且听风吟
12-19 2209
太久没动手了，又断续复习一些以前学过的东西。今天我写的是一个图片展示特效。鼠标onmouseover图片的时候，介绍缓慢出现；移除时候介绍回到原位。代码如下：          图片展示特效              *{margin:0;padding: 0;}         #picList{width:1300px;margin:100px auto;}       
前端:运用html+css+js模仿百度热搜电影榜鼠标移入特效
坚持不懈的大白的博客
07-24 1686
百度热搜上电影榜鼠标移入特效如上图所示。个人觉得上述特效实现原理为使用相对定位、绝对定位实现的(鼠标移入和没有移入时，元素布局有一些不同而已)。至于鼠标移入时，出现延迟效果，则是在css上设置transition(用于设置过渡效果的)实现的。我的实现效果如下(只把那个特效实现，其他元素布局没有搞)
鼠标经过特效
你好！刘斩仙
10-24 753
鼠标经过小特效<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> li{ list-style: none; width: auto;
各种鼠标移入效果
11-25
插件描述：各种鼠标移入效果. 参考示例：http://www.jq22.com/jquery-info4782
js 实现 鼠标移入移出时颜色变化
03-31
js 实现 鼠标移入移出时颜色变化! 值得下载看看!资源免费,大家分享!!
javascript 侧边栏一键分享移入移出效果
青天诀的专栏
11-21 1462
运动框架： 先要清除定时器，防止多次点击或者移入移出时，开启多个定时器，元素的运动会是所有定时器中运动的总和当达到目的时，要清除定时器（使用if/else 实现） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> N
js 鼠标事件_移入移出
热门推荐
随风潜入夜，不白头
04-06 1万+
mouseover（移入） mouseout（移出） mouseover 此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseover处理函数。mouseout 此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseout处理函数。 $(".class").mouseover(funct
JS动画-移入移出
wendZzoo的博客
11-16 1231
移入移出动画效果的实现主要用到了定时器。定时器即 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。它会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 HTML &lt;div id="div"&gt; &lt;span&gt...
JS鼠标事件实现动效
Afengzhenguang的博客
03-12 508
JS鼠标事件 click鼠标点击事件 mousedown / mouseup 鼠标按下/松开事件 mousemove 鼠标移动事件 mouseenter / mouseleave 鼠标移入/移出事件
JS实现鼠标移入移出控制图片的切换效果
幸运的梦之星
03-26 1万+
背景 在看专业英语的时候，学习JS的Timer Event.正好有一个例子，实现的是，图片自动切换，当鼠标点击图片的时候，停止切换。于是想要动手实践一下，并且添加上自己的想法。于是就有了下面的图片和代码。 首先，看一下效果图： 页面加载的时候，图片是每隔1s进行一次切换的，当鼠标移入的时候图片放大，并且停止切换，当鼠标移出的时候，图片缩小为原大小，继续进行切换。 关键代
JS小练习之鼠标移入移出实现的一些效果
weixin_41586886的博客
06-01 4660
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;鼠标移入移出显示效果&lt;/title&gt; &lt;style&gt; #di
javascript 实现网页广告特效
09-28
JavaScript 可以通过操作 DOM 元素，实现网页广告特效。具体步骤如下： 1. 获取广告元素：首先需要通过 JavaScript 获取到要实现特效的广告元素。可以使用 `document.getElementById()` 或 `document.querySelector()` 方法来获取。 2. 添加特效：可以使用 JavaScript 提供的动画库或者自定义动画函数来添加特效。比如，可以使用 `setInterval()` 函数来定时改变广告元素的属性（如位置、大小、透明度等），从而实现动态效果。也可以使用 CSS3 的过渡或动画效果来实现。 3. 监听事件：可以为广告元素添加鼠标移入、移出、点击等事件的监听器，通过 JavaScript 代码响应用户的交互。比如，当鼠标移入广告元素时，可以改变广告的透明度或显示其他相关信息。 4. 广告点击跳转：可以为广告元素添加点击事件监听器，当用户点击广告时，通过 JavaScript 跳转到指定的网页。可以使用 `window.location.href` 来修改当前网页的 URL，实现页面跳转。 5. 广告关闭：可以为广告元素添加关闭按钮，并为关闭按钮添加点击事件监听器。当用户点击关闭按钮时，通过 JavaScript 修改广告元素的显示状态，实现广告的关闭或隐藏。 总结：通过 JavaScript 可以动态改变广告元素的属性、添加特效、监听事件以及实现跳转和关闭等功能，从而实现网页广告的各种特效效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值