本文目录
- javascript 鼠标移动到div后显示图片
- Js实现鼠标经过一张图片时同时出现另一张悬浮图片的代码
- 可以帮忙看下简单的一段js代码吗效果是当鼠标移动到哪张图片时就显示哪张图片
- 鼠标移入移出显示不同图片 javascript javascript实现
- js鼠标滑过显示对应图片
- JS代码，图片轮换，鼠标滑过显示第一张，鼠标移走显示另外一张
- js代码，鼠标移到小图标上就显示一张图片
- 求个“鼠标经过一张图片的时候帮边弹出另一张图片“的js代码
- jS怎么写一个鼠标移到当前位置显示对应的图片
javascript 鼠标移动到div后显示图片
这个很好办，先设置div中的图片的display=’none’,鼠标移入div,再设置他的style.display=’block’就可以了
Js实现鼠标经过一张图片时同时出现另一张悬浮图片的代码
html：
《div class="tImg"》 《img class="sImg1" src="图片1"/》 《img class="sImg2" src="图片2"/》《/div》
CSS：
.tImg {position:relative; width:320px; height:240px}.tImg .sImg1 {width:320px; height:240px}.tImg .sImg2 {display:none; position:absolute; right:2px; top:2px; width:100px; height:100px}.tImg:hover .sImg2 {display:block}
可以帮忙看下简单的一段js代码吗效果是当鼠标移动到哪张图片时就显示哪张图片
《img src="imgs/products/content_upside1_pic.gif"d="pic" /》改《img src="imgs/products/content_upside1_pic.gif" id="pic" /》这个路径有木有错？"imgs/products/content_upside1_pic.gif"
鼠标移入移出显示不同图片 javascript javascript实现
纯css实现方式：
《style》
#test {width:400px; height:300px; background:url(图片1) no-repeat center / cover}
#test:hover {background-image:url(图片2)}
《/style》
《div id=test》《/div》
js实现方式：
《img id=test src="图片1" /》
《script》
test.onmouseover=()=》this.src="图片2";
test.onmouseout=()=》this.src="图片1";
《/script》
js鼠标滑过显示对应图片
如果原图清晰，而显示出来的图片却模糊，应该是显示时图片的尺寸比例与原图的不一样导致的，你把 height=’280’ 删除试试看吧，也就是不要约束图片的宽高比例
JS代码，图片轮换，鼠标滑过显示第一张，鼠标移走显示另外一张
《!DOCTYPE html》《html》《head》***隐藏网址*** 《title》《/title》 《script src="jquery-1.9.0.min.js"》《/script》 《style type="text/css"》 #img_wrapper{ height:300px; width:200px; position:relative; } #img_wrapper img{ width:200px; height:300px; } #mask { width:200px; height:300px; position:absolute; } #hover_btn { height:20px; width:20px; background-color:#ff00dc; } .bg_pink { background-color:#ff00dc; opacity:0.5; } 《/style》 《script type="text/javascript"》 $(document).ready(function () { $("#hover_btn").mouseover(function () { $("#mask").addClass("bg_pink"); }).mouseout(function () { $("#mask").removeClass("bg_pink"); }); }); 《/script》《/head》《body》 《div id="img_wrapper"》 《div id="mask"》《/div》 《img src="image.jpg"/》 《/div》 《div id="hover_btn"》《/div》《/body》《/html》
js代码，鼠标移到小图标上就显示一张图片
图片上面定义鼠标事件，当鼠标移上去的时候触发显示对应的内容，这个一般是一个绝对定位层，鼠标移开的时候隐藏掉
求个“鼠标经过一张图片的时候帮边弹出另一张图片“的js代码
简单的可以用css：
css:#one{position:relative;}
#hidden{position:absolute; top:100px;left:200px;display:none;}
#one:hover #hidden{display:block;}
}
《div id=’one’》
《div id=’img’》《img src=’img_src1’ /》《/div》
《div id=’hidden’》《img src=’img_src2’ /》《/div》
《/div》
-------------------------》
或者使用js控制；
var one=document.getElementById(’one’),hidden=document.getElementById(’hidden’);
one.onmouseover=function(){
hidden.style.display=’block’;
}
jS怎么写一个鼠标移到当前位置显示对应的图片
《!DOCTYPE html》《html》 《head》***隐藏网址***《title》《/title》《style》ul{display:block;list-style:none;width:300px;height:200px;border:1px solid black;}li div,li img{float:left;}li》img{display:none;}《/style》《script》onload=function(){var dx=document.getElementById("dx");var dxdx=document.getElementById("dxdx");var imgs1=dx.getElementsByTagName("img");var imgs2=dxdx.getElementsByTagName("img");var last = 0;for(var i =0;i《imgs1.length;i++){(function(i){imgs1.onmouseover=function(){imgs2.style.display="none";imgs2.style.display="block";last=i;}})(i);}}《/script》 《/head》《body》 《div class="dx" id="dx"》 《ul》 《li》 《div class="dx-1"》《img src="img/aa.png"》《br/》《br/》手机端《/div》 《div class="dx-1"》《img src="img/bb.png"》《br/》《br/》电子商务《/div》 《div class="dx-1"》《img src="img/cc.png"》《br/》《br/》生活服务《/div》 《div class="dx-1"》《img src="img/dd.png"》《br/》《br/》手游应用《/div》 《/li》 《/ul》《/div》《div class="dxdx" id="dxdx"》 《ul》 《li》 《img style="display: block;" src="img/aa-1.png"》 《img src="img/bb-1.png"》 《img src="img/cc-1.png"》 《img src="img/dd-1.png"》 《/li》 《/ul》《/div》 《/body》《/html》
