jquery 操作DOM案例代碼分享
更新時間:2012年04月05日 23:41:44 作者:
jquery 操作DOM案例,實現(xiàn)圖片的顯示,需要的朋友可以參考下
實例如下:
<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)品預覽圖'/>"+imgTitle+"<\/div>"; //創(chuàng)建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設置x坐標和y坐標,并且顯示
}).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>
復制代碼 代碼如下:
<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)品預覽圖'/>"+imgTitle+"<\/div>"; //創(chuàng)建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設置x坐標和y坐標,并且顯示
}).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>
結果:
您可能感興趣的文章:
- jQuery 選擇器、DOM操作、事件、動畫
- jQuery學習筆記[1] jQuery中的DOM操作
- jQuery學習筆記之jQuery的DOM操作
- jQuery移動和復制dom節(jié)點實用DOM操作案例
- jQuery自動切換/點擊切換選項卡效果的小例子
- jQuery之選項卡的簡單實現(xiàn)
- jQuery多項選項卡的實現(xiàn)思路附樣式及代碼
- jquery.idTabs 選項卡使用示例代碼
- jquery實現(xiàn)標簽支持圖文排列帶上下箭頭按鈕的選項卡
- 原生js和jQuery寫的網(wǎng)頁選項卡特效對比
- jQuery封裝的tab選項卡插件分享
- 全面解析DOM操作和jQuery實現(xiàn)選項移動操作代碼分享
相關文章
JQuery省市聯(lián)動效果實現(xiàn)過程詳解
這篇文章主要介紹了JQuery省市聯(lián)動效果實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05jQuery數(shù)據(jù)顯示插件整合實現(xiàn)代碼
由于我們公司的產(chǎn)品涉及到很多的表格數(shù)據(jù)顯示,而且每張表的字段數(shù)都很多,在工作過程中(幾任同仁的努力),整合出一套自認為較為輕巧的方案2011-10-10jQuery實現(xiàn)加入收藏夾功能(主流瀏覽器兼職)
jQuery實現(xiàn)加入收藏夾功能,代碼比較簡單,兼容主流瀏覽器,下面給大家分享下2016-12-12jQuery判斷checkbox(復選框)是否被選中以及全選、反選實現(xiàn)代碼
本篇文章主要是對jQuery判斷checkbox(復選框)是否被選中以及全選、反選實現(xiàn)代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02