鼠标放上去的效果

男娘i 2022-08-24 05:20 177阅读 0赞

其实比较简单   实现的方法很多

有些人喜欢先把div隐藏 然后放上去的时候在显示  鼠标离开的时候在隐藏

个人不喜欢这样实现    毕竟在加载的时候会多加载一个元素

先写一中方式   跟着鼠标跑的那中 有判断位置是左边还是右边的

1.  <style type="text/css">
2.  .div\{ width:180px; height:140px; background-color:\#FFFFFF;border:1px solid \#1871C6;position:absolute;filter: Alpha(opacity=80);opacity:0.8;\} 
3.  .divcontent\{height:112px !important; height:120px; width:100%; font-size:12px; padding:8px 0 0 8px; line-height:24px;\}
4.  .divtitle\{ height:20px; width:100%; background-color:\#1871C6\} 
5.  </style>
6.  <script>
7.  var element = ""
8.  var data = \["大法师</a><br>山丘之王<br>血法师<br>怕拉丁","剑圣<br>先知<br>牛头人<br>小yy","死亡骑士<br>巫妖<br>恐惧魔王<br>小强","恶魔猎手<br>丛林守护者<br>守望者<br>老虎女继嗣","关只林也老了。。。"\]
9.  function ss(e,num,obj)\{
10.   e = e||event
11.   if(element=="")                                               //创建那个框架
12.     \{
13.        var div = document.createElement("div")
14.        div.className = "div"
15.        document.body.appendChild(div)
16.        element = div
17.        var divcontent = document.createElement("div")
18.        divcontent.className = "divcontent"
19.        divcontent.innerHTML = data\[num\]
20.        div.appendChild(divcontent)
21.        var divtitle = document.createElement("div")
22.        divtitle.className = "divtitle"
23.        div.appendChild(divtitle)       
24.     \}
25.   var ob = obj
26.   var left=ob.offsetLeft
27.   while(ob=ob.offsetParent)
28.       \{left += ob.offsetLeft;\};                                             //计算位置
29.   if(document.body.clientWidth-left-obj.offsetWidth>element.offsetWidth)           //判断显示左边还是右边
30.      \{element.style.left = e.clientX + 5; element.style.top  = e.clientY + 3\}
31.   else
32.      \{ element.style.left = e.clientX - 5 - element.offsetWidth;element.style.top  = e.clientY + 3\}
33. \}
34. 
35. function del()\{
36.    if(element!="") 
37.      \{document.body.removeChild(element);element=""\}
38. \}
39. </script>
40. <body>
41. <span onMouseMove="ss(event,0,this)" onMouseOut="del()">人族</span>  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<span onMouseMove="ss(event,1,this)" onMouseOut="del()">兽族</span>
42. 　　　　　　　　　　　<span onMouseMove="ss(event,2,this)" onMouseOut="del()">不死族</span> 
43. <span onMouseMove="ss(event,3,this)" onMouseOut="del()">精灵族</span> 
44. <br>
45. <img onMouseMove="ss(event,4,this)" onMouseOut="del()" src="http://album.hi.csdn.net/app\_uploads/wtcsy/20081212/173755501.p.jpg">
46. </body>

还有一中是鼠标可以移到显示出的div上的效果,也很简单。。。。

1.  <style type="text/css">
2.  .div\{cursor:pointer;position:absolute;width:307px !important;height:174px !important;width:357px;height:194px;padding:20px 0 0 50px; cursor:pointer;background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg); font-size:12px; line-height:24px;\} 
3.  </style>
4.  <script>
5.  var oo = false
6.  var data = \["大法师</a><br>山丘之王<br>血法师<br>怕拉丁","剑圣<br>先知<br>牛头人<br>小yy","死亡骑士<br>巫妖<br>恐惧魔王<br>小强","恶魔猎手<br>丛林守护者<br>守望者<br>老虎女继嗣","关只林也老了。。。"\] 
7.  function create(obj,num)\{
8.    if(oo) return
9.      var div = document.createElement("div")
10.     div.id  = "div"
11.     div.innerHTML = data\[num\]
12.     div.className = "div"
13.     oo = true
14.     document.body.appendChild(div)
15.     var left  = obj.offsetLeft
16.     var top   = obj.offsetTop
17.     var width = obj.offsetWidth
18.     while(obj=obj.offsetParent)
19.     \{
20.        left +=obj.offsetLeft
21.        top  +=obj.offsetTop
22.     \}   
23.     div.style.top  = top
24.     div.style.left = left + width
25.  div.οnmοuseοut=function(event)\{del(event)\}
26. \}
27. 
28. function del(e)\{
29. e=e||event;
30. var obj=e.relatedTarget||e.toElement;
31.     var div =document.getElementById("div")
32. if(div)
33. \{
34.     if(obj==div)return true;
35.     while(obj=obj.parentNode)\{
36.     if(obj==div)return true;\}
37.     document.body.removeChild(div);
38.     oo = false
39. \}
40.    
41. \}
42. 
43. </script>
44. <span onMouseover="create(this,0)" onMouseOut="del(event)" style="cursor: pointer">人族</span>
45. <span onMouseover="create(this,1)" onMouseOut="del(event)" style="cursor: pointer">兽族</span><br><br><br><br><br>
46. <span onMouseover="create(this,2)" onMouseOut="del(event)" style="cursor: pointer">不死族</span><br><br><br><br><br>
47. <span onMouseover="create(this,3)" onMouseOut="del(event)" style="cursor: pointer">精灵族</span>
48. <br><br><br>

模拟下taobao上的字母效

1.  <style>
2.  .div\{width:200px !important; width:250px; height:25px; padding-left:50px; line-height:25px; vertical-align:middle; font-weight:bold; text-align:center; z-index:-1\}
3.  .cdiv\{ height:200px; width:300px; background-color:\#DBF3FF; position:absolute; border:1px solid \#85CCFF; font-size:12px;\}
4.  .smalldiv\{ height:25px; width:20px; overflow:hidden; float:left\}
5.  .xsmalldiv\{ background-color:\#DBF3FF; border:1px solid \#85CCFF; border-bottom:none;height:25px; width:20px; overflow:hidden; float:left; position:relative; z-index:20\}
6.  </style>
7.  
8.  <div class="div">
9.  <div class="smalldiv" onMouseOver="create(this,0)" onMouseOut="del(event,this)">a</div><div class="smalldiv" onMouseOver="create(this,1)" onMouseOut="del(event,this)">b</div><div class="smalldiv" onMouseOver="create(this,2)" onMouseOut="del(event,this)">c</div><div class="smalldiv" onMouseOver="create(this,3)" onMouseOut="del(event,this)">d</div><div class="smalldiv" onMouseOver="create(this,4)" onMouseOut="del(event,this)">e</div><div class="smalldiv">f</div><div class="smalldiv">g</div>
10. </div>
11. <script> 
12. var oo = false 
13. var data = \["大法师</a><br>山丘之王<br>血法师<br>怕拉丁","剑圣<br>先知<br>牛头人<br>小yy","死亡骑士<br>巫妖<br>恐惧魔王<br>小强","恶魔猎手<br>丛林守护者<br>守望者<br>老虎女继嗣","关只林也老了。。。"\]  
14. function create(obj,num)\{ 
15.   if(oo) return 
16.     obj.className = "xsmalldiv"
17.     var div = document.createElement("div") 
18.     div.id  = "div" 
19.     div.innerHTML = data\[num\] 
20.     div.className = "cdiv" 
21.     oo = true 
22.     document.body.appendChild(div) 
23.     var left   = obj.parentNode.offsetLeft 
24.     var oleft  = obj.offsetLeft
25.     var top    = obj.offsetTop 
26.     var height = obj.offsetHeight 
27.     var op =obj
28.     while(obj=obj.offsetParent) 
29.     \{ top  +=obj.offsetTop \}    
30.     div.style.top  = top  + height -1
31.     div.style.left = parseInt(left) + 20
32.  div.οnmοuseοut=function(event)\{del(event,op)\} 
33. \} 
34. 
35. function del(e,op)\{ 
36.     e=e||event; 
37.     var obj=e.relatedTarget||e.toElement; 
38.     var div =document.getElementById("div") 
39.  if(div) 
40.    \{ 
41.       if(obj==div)return true; 
42.       while(obj=obj.parentNode)\{ 
43.       if(obj==div)return true;\} 
44.       op.className = "smalldiv" 
45.       document.body.removeChild(div); 
46.       oo = false;
47.    \}    
48. \} 
49. </script>