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是這個思路