富贵资源网 Design By www.hznty.com
实例如下:
复制代码 代码如下:
<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='产品预览图'/>"+imgTitle+"<\/div>"; //创建 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="/UploadFiles/2021-04-02/apple_1.jpg"><li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="/UploadFiles/2021-04-02/apple_2.jpg"><li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="/UploadFiles/2021-04-02/apple_3.jpg"><li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="/UploadFiles/2021-04-02/apple_4.jpg"></ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>无效果:</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="/UploadFiles/2021-04-02/apple_1.jpg"><li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="/UploadFiles/2021-04-02/apple_2.jpg"><li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="/UploadFiles/2021-04-02/apple_3.jpg"><li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="/UploadFiles/2021-04-02/apple_4.jpg"></ul>
</body>

结果:

jquery 操作DOM案例代码分享

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。