在Dreamweaver中，如何实现鼠标经过文字时在鼠标旁边自动出现图片？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Dreamweaver中，如何实现鼠标经过文字时在鼠标旁边自动出现图片？相关的知识，希望对你有一定的参考价值。
在Dreamweaver中，如何实现鼠标经过文字时在鼠标旁边自动出现想要的图片？
我查了一下,说是可以用层设置来实现,可是具体怎么做?怎么设置?
求助!!
首先给你说说思路，你把鼠标移动到文字上面，这个时候其实你鼠标旁边就有一个隐藏的层，层里面有一个img图片的样式框，接下来就是调用就是一个onmoseover()事件，然后用这个事件调用一个函数，函数里面将这个层显示并且获得当前鼠标移动位置的坐标即可。这是我的思路，虽然美工方面和代码没有那么标准，我也算是个新手，呵呵，希望多多交流
代码如下：
<script language="javascript" type="text/javascript">
var x,y;
document.onmousemove=showplace;//鼠标位置记录
function showdiv()
//显示一个隐藏的层
var showdiv = document.getElementById("showdiv");
if(showdiv.style.display=="none")
showdiv.style.display = "block";
showdiv.style.marginLeft=x;
showdiv.style.marginTop=y;
else
showdiv.style.display = "none";
//获取当前鼠标位置
function showplace()
x= window.event.clientX;
y= window.event.clientY;
</script>
<body>
<!--当鼠标移上来的时候,出发这个事件-->
<b onmouseover="showdiv()" onmouseout="showdiv()">
asd1231231312321
</b>
<div id="showdiv" style="border:1px #009 solid; display:none; width:100px; height:100px; background-image:url(fightingReport.jpg);">
</div>
<div id="p1">
</div>
<div id="p2">
</div>
</body> 参考技术A 这个很简单，不用JS。用css完全可以。而且也不用层，主要利用，background:url()的属性。
这个要是用JS，那也太夸张了。 参考技术B 这个得用到js语句，就是取当前鼠标的位置再追加一个层，层内放图
js jq 实现鼠标经过div背景以进度条方式 变宽，鼠标离开变小，同时文字颜色和原来不一样
1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 <title></title> 6 <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 7 </head> 8 <style> 9 .gg{ 10 height: 50px; 11 width: 160px; 12 border: 1px solid #999; 13 color: #000000; 14 position: relative; 15 text-align: center; 16 } 17 .jj{ 18 height: 50px; 19 width: 0; 20 background-color: #999; 21 position: absolute; 22 text-align: center; 23 overflow: hidden; 24 } 25 .text{ 26 height: 50px; 27 width: 160px; 28 color: #ffffff; 29 text-align: center; 30 overflow: hidden; 31 } 32 </style> 33 <script> 34 $(document).ready(function(){ 35 var bb;//定义一下bb，就是鼠标离开的定时触发缩小的事件变量，防止鼠标经过时清除事件出错 36 $(".gg").mouseover(function(){ 37 //alert(5)i 38 clearInterval(bb);//清除bb，防止黑色背景条还在变小，造成一闪闪的现象 39 i=$(".jj").width();//获取背景条宽度，从这个宽度开始变大 40 aa=setInterval(function(){ 41 i+=2;//自增 42 $(".jj").css("width",i);//赋值给宽度 43 if (i>=160) {//达到最大宽度，停止变大 44 clearInterval(aa);//清除setInterval 45 } 46 },3);//毫秒变一次，每次增大量就是上面的自增i 47 }); 48 $(".gg").mouseout(function(){ 49 //var i=1; 50 //j 51 j=$(".jj").width();//获取背景条宽度，从这个宽度开始变小 52 clearInterval(aa); 53 bb=setInterval(function(){ 54 j-=2; 55 $(".jj").css("width",j); 56 if (j<=0) { 57 58 clearInterval(bb); 59 } 60 },3); 61 }) 62 }) 63 </script> 64 <body> 65 <div class="gg"> 66 <div class="jj"><div class="text">nimeide</div></div> 67 nimeide 68 </div> 69 </body> 70 </html>
以上是关于在Dreamweaver中，如何实现鼠标经过文字时在鼠标旁边自动出现图片？的主要内容，如果未能解决你的问题，请参考以下文章