JS特效：鼠标经过展开隐藏内容的代码

发布时间：2018-08-16 19:50:41 所属栏目：Unix 来源：站长网

导读：Java Script特效：鼠标经过展开隐藏内容的代码。这是一个非常经典的效果，我们经常在一些软件站，特别是在一些电影网站经常见到这种效果，把软件或电影简介折叠起来，需要时点击或者把鼠标移上去，详细的内容就会显示出来，这样可以节省布局空间，又不影

　　JavaScript特效：鼠标经过展开隐藏内容的代码。

　　这是一个非常经典的效果，我们经常在一些软件站，特别是在一些电影网站经常见到这种效果，把软件或电影简介折叠起来，需要时点击或者把鼠标移上去，详细的内容就会显示出来，这样可以节省布局空间，又不影响用户的阅读。只不过本例只是实现了该特效的雏形，并没有加以美化，如果您打算运用到网页当中，那就要自己动手“加工”一下了。

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠标滑过文字内容展开</title> </head> <body> <style> .div{ width:80px; height:15px; overflow:hidden;font-size:10.5pt; } </style> <script type="text/javascript"> function scr(){ var x=document.getElementsByTagName("div"); x[0].onmouseover=function(){ x[0].style.overflow="visible" x[0].style.width="auto" } x[0].onmouseout=function(){ x[0].style.overflow="hidden" x[0].style.width="80" // 控制默认显示宽度，烈火网小编注。 } } window.onload=scr; </script> <div class="div"> <p>烈火网（www.veryhuo.com）提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等为主要宗旨，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的网上学习平台。 </p> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!