网站开发之鼠标悬停简单特效实现(四)

版权声明:本文为博主原创文章,转载请注明CSDN博客源地址!共同学习,一起进步~ https://blog.csdn.net/Eastmount/article/details/53024093

        鼠标悬停等操作和特效是网站设计非常重要的一个内容,常见的包括包括:鼠标移动悬停放大、鼠标悬停背景颜色变换、鼠标悬停下拉菜单显示、图片旋转等特效,这篇文章主要是总结HTML和JavaScript中关于鼠标操作的一些特效,希望基础性文章对你有所帮助,如果文章中存在错误或不足之处,还请海涵~

一. 鼠标悬停图片放大效果

        该功能主要是通过超链接<a>实现的,其中hover是表示悬停的效果:

<html>
<head>
<title>鼠标悬停放大</title>
<style> 
    #resize a:hover { position: absolute;}
    #resize a:hover img { width: 200px; height: 200px}
</style>      
</head>
<body>
	<p>图片悬停放大图片</p>
 	<div id="resize">
 		<a href="index.html">
    		<img src="move.jpg" border=0  height="50" width="50" />
    	</a>
	</div>
</body>
</html>
        其中运行的效果如下所示:
  

        注意:hover表示悬停,图片对应“a:hover img”。



二. 鼠标悬停背景颜色变换

        核心代码如下所示,主要通过鼠标悬停hover设置超链接变换。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标悬停背景色变换</title>
<style type="text/css">
    .navigation {
        margin:0 auto;      /* 居中显示 */
        text-align: center;
        width: 600px;
        height: 50px;
        margin-top: 20px;
        background-color: #FFC1E0;
    }
    h2 {
        float: left;        /* 水平显示 */
        background-color: #4F282D;
        height: 40px;
        width: 92px;
        font-family: "Palatino Linotype";
        font-weight: 400;
        text-align: center;
        padding-top: 0px;
        margin-top: 4px;    /* 否则h2下移 */
        margin-left: 6px;
    }
    .navigation a {
        color: #1AFD9C;    /* 超链接字体颜色 */
        text-decoration: none;
    }
    .navigation h2 a:hover {
        color: #39F;       /* 超链接悬停变换颜色 */
    }
    .navigation h2:hover {
        background-color: #F9F900;
    }
</style>
</head>
<body>
    <div class="navigation">
        <h2><a href="#">首页</a></h2>
        <h2><a href="#">关于我</a></h2>
        <h2><a href="#">相册</a></h2>
        <h2><a href="#">心情</a></h2>
        <h2><a href="#">留言</a></h2>
        <h2><a href="#">文章</a></h2>
   </div>
</body>
</html>
        运行结果如下所示,鼠标悬停前的效果:


        鼠标移动到背景上面的效果如下所示:

        下面讲解几个重点:
        1、在<div class="navigation">布局过程中,需要在CSS中设置"margin:0 auto;",才能让它居中显示,这段代码的含义是:第一个值就是元素的上下边距0,第二个值就是左右边距。当元素的定义了width属性时,auto还能实现居中的效果。

        2、在CSS中设置h2,需要添加"float: left;",使其水平显示,不增加该句的效果如下所示:


    

        3、整个DIV布局代码如下所示,h2会向下移动一段距离,这时CSS中通过"margin-top: 4px;"进行微调。

        4、悬停的核心代码如下所示,其中"text-decoration: none;"设置超链接无下划线,然后是悬停在超链接a和字体h2的变换效果。注意冒号(:)和hover之间不能有空格,否则效果消失。



三. 鼠标悬停图片旋转

        下面这段代码是网上找到的,鼠标悬停图片旋转的特效,非常不错,推荐使用。
        旋转参考地址:http://www.w3school.com.cn/cssref/pr_transform.asp
        PS:代码忘记出处了,如果谁知道提醒我,我补加原文地址。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片旋转</title>

<style type="text/css">
    .photo-container {
        -webkit-perspective: 1200px; /* 透视视图 */
        perspective: 1200px; /* 透视视图 */
        width:150px;
    }
    .rotate-box {
        position:relative;
        left:10%;
        -webkit-transform-style: preserve-3d; /* 3D 转换 */
        transform-style: preserve-3d; /* 3D 转换 */
        transition:1s ease; /* 转换效果持续 1秒 */
    }
    .rotate-box:after {
        content:' ';
        display:block;
        width:100%;
        -webkit-transform:rotateX(90deg);
        transform:rotateX(90deg);
        background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
    }
    .rotate-box img {
        width:150px;
        height:150px;
    }
    .photo-container:hover .rotate-box {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
</style>
</head>
<body>
<p>图片旋转</p>
<div class="photo-container">
    <div class="rotate-box">
        <img src="move.jpg" alt="rotate 3d旋转" />
    </div>
</div>
</body>
</html>
        鼠标悬停的效果如下所示:

    


四. 鼠标悬停下拉菜单显示

        这段代码主要是通过鼠标悬停,显示下菜单的效果,希望对你有所帮助。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>鼠标悬停下拉</title> 
<style type="text/css"> 
    #main {
        margin:0 auto;      /* 居中显示 */  
        text-align: center;  
        width: 700px;  
        height: 50px;  
        margin-top: 20px;  
        background-color: #FFC1E0;  
    }
    /* 设置红色的3个框:首页 关于我们 我们的服务 */ 
    #nav { 
        float: left;
        line-height: 24px; 
        list-style-type: none; /* UL无样式 */ 
        background: #666; 
        width: 90%;          /* 总长度 */
        height: 40px;
        margin-left: 10px;     /* 距离左边 */
        margin-right: 10px;
        margin-top: 5px; 
    } 
    /* 三个li的样式设置 block及宽高 */
    #nav a { 
        display: block; 
        width: 200px; 
        height: 40px;
        padding-top: 5px;
        text-align:center;  
    } 
    #nav a:link { 
        color:#666; 
        text-decoration:none;  /* 无下划线 */
    } 
    #nav a:visited { 
        color:#666;
        text-decoration:none; 
    } 
    #nav a:hover {  /* 鼠标无下划线加粗 */
        color:#FFF;
        text-decoration:none;
        font-weight:bold; 
    } 
    #nav li { 
        float: left;         /* 增加水平显示 */
        width: 200px;        /* 设置宽度 */
        background:#CCC; 
        height: 40px;
        margin-left: 1px;
    } 
    #nav li a:hover{        /* 鼠标悬停li颜色变换 */
        background: #0F0; 
        height: 35px;
    } 
    #nav li ul { 
        line-height: 27px; 
        list-style-type: none;
        text-align:left; 
        left: -999em; 
        width: 200px; 
        position: absolute; 
    } 
    #nav li ul li{ 
        float: left; 
        width: 200px; 
        background: #F6F6F6;  /* 下拉菜单颜色 */ 
    } 
    #nav li ul a { 
        display: block; 
        width: 180px;
        text-align:left;
        padding-left:24px; 
    } 
    #nav li ul a:link { 
        color:#666; 
        text-decoration:none; 
    } 
    #nav li ul a:visited { 
        color:#666;
        text-decoration:none; 
    } 
    #nav li ul a:hover { 
        color:#F3F3F3;
        text-decoration:none;
        font-weight:normal; 
        width: 156px;
        background:#C00; 
    } 
    #nav li:hover ul { 
        left: auto; 
    } 
    #nav li.sfhover ul { 
        left: auto; 
    } 
    #content { 
        clear: left; 
    } 
</style> 
</head> 
<body> 
<div id="main">
  <ul id="nav">
    <li><a href="#">首页</a>
      <ul>
        <li><a href="http://www.baidu.com">Personal</a></li>
        <li><a href="#">Group</a></li>
        <li><a href="#">Administrator</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a>
      <ul>
        <li><a href="#">我们的故事</a></li>
        <li><a href="#">我们的团队</a></li>
        <li><a href="#">我们的青春</a></li>
      </ul>
    </li>
    <li><a href="#">我们的服务</a>
      <ul>
        <li><a href="#">网页设计</a></li>
        <li><a href="#">页面制作</a></li>
        <li><a href="#">程序开发</a></li>
      </ul>
    </li>
   </ul>
   </div>
</body> 
</html>

        运行效果如下图所示:




        下面这段代码是简单实现鼠标悬停下拉菜单弹出:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>鼠标悬停下拉</title> 
<style>
    ul.menu, ul.menu li{margin:0px;padding:0px;list-style:none;position:relative;}
    ul.menu li{line-height:25px}
    ul.menu li{float:left;margin-left:10px}
    ul.menu div{display:none;position:absolute;top:20px;left:0px}
    ul.menu div a{display:block}
    ul.menu li:hover div{display:block;}
</style>
</head> 
<body> 
<div id="main">
  <ul class="menu">
    <li><a href="#">Menu1</a><div><a href="#">menu11</a><a href="#">menu12</a></div></li>
    <li><a href="#">Menu2</a><div><a href="#">menu21</a><a href="#">menu22</a></div></li>
    <li><a href="#">Menu3</a><div><a href="#">menu31</a><a href="#">menu32</a></div></li>
  </ul>
</div>
</body> 
</html>
        显示效果如下所示:




        希望文章对你有所帮助,这是简单总结了HTML鼠标常见的事件。
        这个网站很多经典效果,但要登录。网址:http://www.16css.com/menu/

        下面是今天晚上发表的一篇QQ说说:
        如果说当老师是我的第一个愿望,花了我18年时间,三个月前终于实现;那么,我的第二个愿望,想有一个自己的个人网站,最近也终于实现了,好开心啊,哈哈哈。
        欢迎大家访问: www.eastmountyxz.com
        大四毕业那年我在去遵义支教的路上写下这样一首诗:

贵州众美路迢迢,
未负劳心此一遭。
搜得破书三四本,
也堪将去教尔曹。
        期待自己的第三个愿望,网站目前只有首页,太忙了还没丰富进去,更多课程内容见我的CSDN。最后当然得感谢沈同学做的首页,哈哈哈,没白教这些学生,真心感谢。
但行好事,莫问前程。
待随满天李桃,再追学友趣事。
        同样,待我已老,也会把自己的每个阶段的人生都丰富到这个网站中去,感觉自己一辈子都与学校学生有关了吧!享受在学校里与同学,学生的生活,发自内心的enjoy。
        日子长着,校园这壶老酒还需我慢慢品尝。
        有学生说我的第三个愿望是:找个妹子谈谈人生和我的第四个愿意,这个不错。
        有学生又说:我是他大学最好的老师
        其实,我真的很荣幸认识自己的每一个学生,所以也会用心对待任何一个并坚持。
        哎,又鸡汤了,当老师后咋变成这样了,fuck~
        (By:Eastmount 2016-11-06 半夜2点 http://blog.csdn.net/eastmount/ )

没有更多推荐了,返回首页