jquery 操作DOM案例代碼分享
更新時間：2012年04月05日 23:41:44 作者：
jquery 操作DOM案例，實(shí)現(xiàn)圖片的顯示，需要的朋友可以參考下
實(shí)例如下：
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script language="javascript">
/*$(document).ready(function(){
var x=10;
var y=20;
$("a .tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.title+"</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top" : (e.pageY+y) + "px",
"left" : (e.pageX+x) + "px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
});
});
*/
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產(chǎn)品預(yù)覽圖'/>"+imgTitle+"<\/div>"; //創(chuàng)建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
</head>
<body>
<div style="display:none">
<p><a href="#" class="tooltip" title="這是我的超鏈接提示1">提示1</a></p>
<p><a href="#" class="tooltip" title="這是我的超鏈接提示2">提示2</a></p>
<p><a href="#" title="自帶提示1">自帶提示1</a></p>
<p><a href="#" title="自帶提示2">自帶提示2</a></p>
</div>
<h3>有效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>無效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>
</body>
復(fù)制代碼 代碼如下:
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script language="javascript">
/*$(document).ready(function(){
var x=10;
var y=20;
$("a .tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.title+"</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top" : (e.pageY+y) + "px",
"left" : (e.pageX+x) + "px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
});
});
*/
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產(chǎn)品預(yù)覽圖'/>"+imgTitle+"<\/div>"; //創(chuàng)建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
</head>
<body>
<div style="display:none">
<p><a href="#" class="tooltip" title="這是我的超鏈接提示1">提示1</a></p>
<p><a href="#" class="tooltip" title="這是我的超鏈接提示2">提示2</a></p>
<p><a href="#" title="自帶提示1">自帶提示1</a></p>
<p><a href="#" title="自帶提示2">自帶提示2</a></p>
</div>
<h3>有效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>無效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>
</body>
結(jié)果：
您可能感興趣的文章:
- jQuery 選擇器、DOM操作、事件、動畫
- jQuery學(xué)習(xí)筆記[1] jQuery中的DOM操作
- jQuery學(xué)習(xí)筆記之jQuery的DOM操作
- jQuery移動和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
- jQuery自動切換/點(diǎn)擊切換選項卡效果的小例子
- jQuery之選項卡的簡單實(shí)現(xiàn)
- jQuery多項選項卡的實(shí)現(xiàn)思路附樣式及代碼
- jquery.idTabs 選項卡使用示例代碼
- jquery實(shí)現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項卡
- 原生js和jQuery寫的網(wǎng)頁選項卡特效對比
- jQuery封裝的tab選項卡插件分享
- 全面解析DOM操作和jQuery實(shí)現(xiàn)選項移動操作代碼分享
相關(guān)文章
JQuery省市聯(lián)動效果實(shí)現(xiàn)過程詳解
這篇文章主要介紹了JQuery省市聯(lián)動效果實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了jquery獲取節(jié)點(diǎn)名稱的相關(guān)資料,需要的朋友可以參考下2015-04-04
jQuery數(shù)據(jù)顯示插件整合實(shí)現(xiàn)代碼
由于我們公司的產(chǎn)品涉及到很多的表格數(shù)據(jù)顯示，而且每張表的字段數(shù)都很多，在工作過程中(幾任同仁的努力)，整合出一套自認(rèn)為較為輕巧的方案2011-10-10
下面小編就為大家?guī)硪黄猨query 多個radio的click事件實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
本篇文章主要是對jquery.ajax的url中傳遞中文亂碼問題的解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery實(shí)現(xiàn)加入收藏夾功能(主流瀏覽器兼職)
jQuery實(shí)現(xiàn)加入收藏夾功能，代碼比較簡單，兼容主流瀏覽器，下面給大家分享下2016-12-12
jQuery實(shí)現(xiàn)鼠標(biāo)滑過遮罩并高亮顯示效果
本文為大家詳細(xì)介紹下使用jQuery實(shí)現(xiàn)鼠標(biāo)滑過遮罩高亮顯示效果，想必這種效果在網(wǎng)上大家都有見到過，下面是具體的示例，感興趣的各位可以參考下哈，希望對大家有所幫助2013-07-07
jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
本篇文章主要是對jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery實(shí)現(xiàn)表格的增、刪、改操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格的增、刪、改操作,涉及基于jQuery的事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
本文主要講解jquery刪除數(shù)組中重復(fù)元素的具體思路與示例代碼，有助于理解與學(xué)習(xí)，希望對大家有所幫助2016-12-12