初探射流研究…和简单隐藏效果的实例

js:在页面中用户操作页面时发生的效果都是射流研究…功劳。操作有点击，移入，和移出等。

例1:通过显示隐藏盒子

！DOCTYPE html html head meta charset=' utf-8 '/title/title style * { margin 33600 px；padding:0px }。李{列表式：无；} # div1 { width:200px文本对齐：居中；font :30 px/60px ' sim hei '；} # div 2 { width :200 pxborder :1 px纯黑；} ul { margin-top :10 px；border:1px纯黑；display : none } Li { height :60 px } Li :悬停{底色：蓝色；颜色：白色；}/style/head html div id=' div 1 ' div id=' div 2 '设置/div ul id='oul' li搜索设置/li li高级设置/li li关闭预测/li li搜索历史/li /ul /div /html脚本文档。getElementById('div1 ').onmouseover=function(){ document。getelementbyid(' oul ')。风格。display=' block} document.getElementById('div1 ').onmouseout=function(){ document。getelementbyid(' oul ')。风格。显示='无'；}/脚本/html当通过变量名定义变量可以继续实现：

var ODI v1=文档。getelementbyid(' div 1 ')；var oul=文档。getelementbyid(' oul ')；ODI v1。onmouseover=function(){ oul。风格。display=' block} ODI v1。onmouseout=function(){ oul。风格。显示='无'；}也可以通过透明的不透明度，和高度来控制隐藏和显示。

制作百度登录效果，点击登录，弹出登录窗口，及退出

！DOCTYPE html html head meta charset=' utf-8 '/title/title style body { border :1 px纯白} #登录{ width:300px高度：300 px背景-颜色：黄色；余量：0px汽车；页边距-顶部：200像素；display:none}。classclose { width:40px高度：20 pxfont :16 px/20px ' sim hei '；文本对齐：居中；背景色：红色；光标：指针指针；右浮动：}/style/head body div id=' box '关闭登录/div div id='登录' div id='关闭'关闭'退出/div /div /body /html脚本var obox=文档。getelementbyid(' box ')；var ologin=文档。getelementbyid('登录')；var oclose=文档。getelementbyid(' close ')；obox。onclick=function(){ olo in。风格。display=' block}点钟方向。onclick=function(){ ologin。风格。显示='无'；} /script/html(即使简单也不可饿大意，以上便是滞育方法控制盒子显示状态)。

以上这篇初探射流研究…和简单隐藏效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。