导航:首页 > 文字图片 > js点击文字弹出图片

js点击文字弹出图片

发布时间:2022-11-20 17:49:36

A. 急!!!这种鼠标放到文字上出现图片的JS效果叫什么,用HTML怎么

onmouseover()事件
不知道你的文字是不是超链接,我就以超链接为例写一个例子(其它标签也是一样):
<a href="#" onmouseover="aaa()" onmouseout="bbb()">徐闻秀作品</a>
<script>
//鼠标浮动到文字上时的事件
function aaa(){
//这个地方将你的图片显示出来
}
//鼠标离开时
function bbb(){
//这个地方将你的图片隐藏
}
</script>

B. 求鼠标经过图片或文字链接弹出图片的div+css+js代码

<div id="test" style="width:100px;height:100px;background-color:#ff0000" onmouseover="aa()" onmouseout="bb()"></div>
<div id="test2" style="width:100px;height:100p;background-color:#00ff00;display:none"></div>
<script language="javascript">
function aa(){
document.getElementById("test2").style.display="block";
}
function bb(){
document.getElementById("test2").style.display="none";
}
</script>

C. 【JavaScript】如何实现点击链接文字出现图片效果

比较汗~ 先别学JAVA 先去看HTML的基础

D. 求写网页点击文字 显示一个框 的js代码 在本页显示 比如新出的框可以显示文字 图片等等

你这个意思是要建一个新的层,里面放图片和文字,为什麽本层不能放么,这个用不着特效吧,直接用框架即可

E. jquery中如何做到鼠标经过文字显示图片

这是一个事件,触发条件就是鼠标覆盖在上面,比如:$('.text').hover(),然后就是事件,具体如下:
html:代码如下
<p>这是触发文字</p>
<img src='这是图片'>
css:
img{
display:none
}
JQ:
$('p').hover( function(){
$('img').css('display','block');
});

F. js怎么做点击一个图片弹出一个层的效果

其实弹出层的思路还是比较简单的:

一般是这个层是隐藏的(display:none),然后点击你说的"图片(或者任何的页面元素)",这个层就会显示(一般display:inline-block/block),同时设置一个灰色的背景看起来这个层是浮于下面的层之上的。

下面是一段演示代码:


<!doctypehtml>
<html>
<head>
<metacharset="utf-8"><title>弹出层—到浏览器中央—背景变暗</title>
<style>
*{margin:0;padding:0px;}
body{padding:30px;}
#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}
#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}
#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}
#showp{padding:5px;}
#text{font-size:12px;text-indent:2em;line-height:20px;}
#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}
</style>
<scripttype="text/javascript">
functionshow(){
variWidth=document.documentElement.clientWidth;
variHeight=document.documentElement.clientHeight;
varbgObj=document.createElement("div");
bgObj.setAttribute("id","bgbox");
bgObj.style.width=iWidth+"px";
bgObj.style.height=Math.max(document.body.clientHeight,iHeight)+"px";
document.body.appendChild(bgObj);
varoShow=document.getElementById('show');
oShow.style.display='block';
oShow.style.left=(iWidth-302)/2+"px";
oShow.style.top=(iHeight-202)/2+"px";
functionoClose(){
oShow.style.display='none';
document.body.removeChild(bgObj);
}
varoClosebtn=document.createElement("span");
oClosebtn.innerHTML="×";
oShow.appendChild(oClosebtn);
oClosebtn.onclick=oClose;
bgObj.onclick=oClose;
}
</script>
</head>
<body>
<aonclick="show();returnfalse"href="#">请猛击我(我会弹到中间,同时背景变暗)</a>
<divid="show"><h3>弹出层标题栏</h3>
<pid="text">
这里是弹出层内容,内容可以是文字、图片等,可以是iframe传进来,也可以用jQuery的load()传进来。
</p>
</div>
</body>
</html>

G. 鼠标移动到文字上显示图片

用js可以,创建两个div,一个是放你的文字div1,一个放你的图片div2,当鼠标移到文字时,设置div1的onmouseover设置为使div2显示,当鼠标移出文字时设置div1的onmouseout设置为div2隐藏。

H. 网页里点击一个文字 在页面中间弹出一张图片,点击空白图片消失

推荐你使用 bootstrap , 有现成的方法 modal , 个人认为非常棒的弹出层效果网页链接

I. js点击多个不一样的文字链接,链接下方显示多个不同的图片。

functionattachIMG(b,d){
if(!getCookie("BAHAID")&&"Y"==attachMediaLogin)returnconfirm("您需要先登入才能观看喔")?(b.href="https://user.gamer.com.tw/login.php",!0):!1;
imgid="IMG"+b.id;
if(""==b.type)newHTML='<IMGsrc="'+b.id+'"border=0onload=resizeIMG(this)>';
else{
vara=b.type.match(/width=[0-9]+/i),
c=b.type.match(/height=[0-9]+/i);
width=a?a[0].match(/[0-9]+/)[0]:0;
height=c?c[0].match(/[0-9]+/)[0]:0;
newHTML='<IMGsrc="'+b.id+'"border=0onload="resizeIMG_wh(this,'+width+","+height+')">'
}
"click"==d?newHTML.toLowerCase().replace(/border="?0"?/,"").replace(/["]/g,"").substr(0,28)!=b.innerHTML.toLowerCase().replace(/border="?0"?/,"").replace(/["]/g,"").substr(0,28)?b.innerHTML=newHTML:b.id!=b.href?confirmLink(b.href):window.open(b.href,"",""):"show"==d&&newHTML.toLowerCase().replace(/["]/g,"")!=b.innerHTML.toLowerCase().replace(/["]/g,"")&&(b.innerHTML=newHTML);
return!1
}


上面这个就是这个链接的方法
<aname="attachImgName"href="http://truth.bahamut.com.tw/s01/201506/.JPG"id="http://truth.bahamut.com.tw/s01/201506/.JPG"onclick="returnattachIMG(this,'click')"class="T3_red"type=""se_prerender_url="complete"><scriptlanguage="javascript">showMediaClick("img")</script>请点选观看图片请点选观看图片</a>


点击之后把<a>中的内容替换为图片,所以文字消失了,图片来了。

a.innerHTML="<img/>";

J. JS弹出图片下面有文字描述问题!高分请教!

js实现:给div加个id div1
var divobj = document.getElementById("div1")
获取title中值:var text = divobj.getAttribute("title");
设置到div内容:divobj.innerHTML = text;

当然你用jquery 就更简单了
以上代码没测试过 ,大体js是这个思路

阅读全文

与js点击文字弹出图片相关的资料

热点内容
买小公主的衣服图片 浏览:81
烫46分发型男图片 浏览:22
word图片里的字体大小怎么调 浏览:11
杭州美女少妇图片 浏览:131
玉佩挂衣服里面的图片 浏览:847
男大童发型图片大全 浏览:162
将文字和图片设置成一张ppt 浏览:196
大屏导航如何切换图片 浏览:203
怎么教都教不会搞笑图片 浏览:285
华博士漆图片价格 浏览:308
克拉玛依中心医院图片高清 浏览:218
高清文字桌面壁纸图片大全 浏览:615
剪影怎么填加图片 浏览:608
小女孩吃馒头流泪的图片 浏览:825
qq空间回复怎么加图片 浏览:503
无奈图片文字大全 浏览:921
戴眼镜配衣服好看图片 浏览:313
微信背景图片女生霸气 浏览:544
女子衣服被光被绑图片 浏览:12
手机上如何压缩图片打包发送 浏览:258