鼠标滑动显示不同页面的效果

<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
<div>
    <span onmouseover="demo(‘idDiv1‘)">111</span>
    <span>&nbsp;&nbsp;</span>
    <span onmouseover="demo(‘idDiv2‘)">222</span>
</div>
<div>
    <p id="idDiv1">qqqqqqqqqqqqqqqqqqqqqq</p>
    <p id="idDiv2" style="display:none">wwwwwwwwwwwwwwwwwwwwww</p>
</div>
<script language="javascript">
function demo(obj){
    for(var i=1;i<5;i++){
        var id=document.getElementById(‘idDiv‘+i);
        if(id!=null){
            id.style.display="none";
        }
    }
    var idDiv=document.getElementById(obj);
    idDiv.style.display="block";
}
</script>
</body>
</html>

 1 <html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title></title>
 5 </head>
 6
 7 <body>
 8 <div>
 9     <span onmouseover="demo(‘idDiv1‘)">111</span>
10     <span>&nbsp;&nbsp;</span>
11     <span onmouseover="demo(‘idDiv2‘)">222</span>
12 </div>
13 <div>
14     <p id="idDiv1">qqqqqqqqqqqqqqqqqqqqqq</p>
15     <p id="idDiv2" style="display:none">wwwwwwwwwwwwwwwwwwwwww</p>
16 </div>
17 <script language="javascript">
18 //方法一
19 function demo(obj){
20     for(var i=1;i<5;i++){
21         var id=document.getElementById(‘idDiv‘+i);
22         if(id!=null){
23             id.style.display="none";
24         }
25     }
26     var idDiv=document.getElementById(obj);
27     idDiv.style.display="block";
28 }
29 //方法二  获取所有的ID,并比较是哪个id选中,则其他id不显示
30 </script>
31 </body>
32 </html>
时间: 2024-08-05 08:59:51

鼠标滑动显示不同页面的效果的相关文章

鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标

1 <html> 2 <head> 3 <style> 4 #oneDiv{ 5 position :absolute ; 6 left:200px; 7 top:100px; 8 width:300px; 9 border:1px solid 10 } 11 </style> 12 </head> 13 14 <body> 15 <div id="oneDiv"> 16 <p> 17 亚太

鼠标滑动到当前页面触发动画效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浏览器滑动到当前界面触发动画</title> <style> * { margin:0; padding:0; }//reset css .box { width:100%; height:1500px; background:gray; } .tw

鼠标滑动一定距离的左侧菜单置顶效果

如图:上述实现的是鼠标向下滑动90px,左侧菜单整体上移置顶,而菜单在最开始便进行了定位,距离顶部90px 以下为实现这个效果的js代码: /*鼠标滑动一定距离的菜单效果*/ $(document).scroll(function() { var top=$(this).scrollTop(); console.log(top); if(top>90) { $(".sidebar").css("top","0"); } if(top<

利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

效果如图鼠标滑动导航  下边显示不同效果 html代码和css格式代码 <body> <div id="tab" class="tab"> <div class="tab-title" id="tab-title"> <ul> <li class="select" data-flag="0"><a href="#

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样 主要的方法 $(".section  ul li").hover(function() //伪类的触发 $(this).find(".r

[ jquery 效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅

此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来.在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅 实例: <!DOCTYPE html><html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my

鼠标滑动--水滴效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标滑动--水滴效果</title> <style> *{margin: 0;padding: 0;} body{padding: 100px;} div{width: 50px;height: 50px;background-color: #2

闹钟AlarmAndMusic 滑动调整时间和页面旋转风车效果《IT蓝豹》

闹钟AlarmAndMusic 滑动调整时间和页面旋转风车效果 闹钟AlarmAndMusic 和支持播放音乐效果的,上下滑动调整时间和页面旋转风车效果,由于制作的gif有些问题,效果不明显,欢迎下载使用看看真实的效果.本例子主要由AlertActivity和AlarmService和AlarmAlertWakeLock三个类完成.AlarmAlertWakeLock主要代码:public class AlarmAlertWakeLock {    private static PowerMan

Android滑动页面导航效果: PagerSlidingTabStrip

把github上的PagerSlidingTabStrip稍作修改: tab的文字颜色选中变色(原版文字不变色) 栗子:http://download.csdn.net/detail/onlyonecoder/7722021 PagerSlidingTabStrip 自定义属性列表: pstsIndicatorColor Color of the sliding indicator pstsUnderlineColor Color of the full-width line on the bo