jquery系列---实现图片提示功能

最新推荐文章于 2022-01-05 22:51:29 发布

追寻

最新推荐文章于 2022-01-05 22:51:29 发布

阅读量1k

点赞数

分类专栏： jquery知识文章标签： jquery function 文档 div html url

本文链接：https://blog.csdn.net/wwww1988600/article/details/7770772

版权

jquery知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

例如：实现如下的效果，当鼠标放在图片上时，会出现及时的提示效果

具体代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="../临时文档/jquery1.4.2.js" ></script>
<title>无标题文档</title>
<style type="text/css">
#tooltip {
position:absolute;
border:1px solid #c3c;
background-color:#ccc;
padding:2px 10px;
}
#imgtest1 {
position:absolute;
width:401px;
height:382px;
padding:20px 30px;
background:url(img/bg.png) no-repeat;
}
</style>
<script type="text/javascript">
$(function(){
$('#tooltip1').mouseover(function(e){
this.mytitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+this.mytitle+"</div>";
$('body').append(tooltip);

$('#tooltip').css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+20)+"px"
}).show('fast');
});

$('#tooltip1').mouseout(function(){
this.title = this.mytitle;
$('#tooltip').remove();
});

$('#tooltip1').mousemove(function(e){
$('#tooltip')
.css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+20)+"px"
});
});
$("#imgtest").mouseover(function(e){
this.mytitle = this.title;
this.title = "";
var imgtile = this.mytitle?"<br/>"+this.mytitle:"";
var imgtest = "<div id='imgtest1'><img src='"+this.src+"' alt='图片预览'/>"+imgtile+"</div>";
$("body").append(imgtest);
$("#imgtest1").css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+20)+"px"
}).show("fast");
});
$("#imgtest").mouseout(function(){
this.title = this.mytitle;
$("#imgtest1").remove();
});
$('#imgtest').mousemove(function(e){
$('#imgtest1')
.css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+20)+"px"
});
});
})
</script>
</head>
<body>
<p><a href="#" id="tooltip1" title="提示">显示更多商品11</a></p>
<p><a href="#" title="提示">显示更多商品333</a></p>
<p><img src="img/baidu.gif" alt="图片" width="200px" height="100px" id="imgtest" title="baidu"/></p>
</body>
</html>

追寻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery系列---实现图片提示功能

例如：实现如下的效果，当鼠标放在图片上时，会出现及时的提示效果具体代码如下：无标题文档#tooltip {position:absolute;border:1px solid #c3c;background-color:#ccc;padding:2px 10px;} #imgtest1 {position:absolute;wid
复制链接

扫一扫