Jquery实现的悬浮按钮，浮现图片

最新推荐文章于 2021-07-20 23:27:17 发布

代码完美人

最新推荐文章于 2021-07-20 23:27:17 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/Shelsea_x/article/details/9295229

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

<style type="text/css">
#tooltip {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 2px;
display: none;
color: #fff;
}
body {
height:2000px;
font:12px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
}

#floatMenu {
position:absolute;
top:400px;
left:50%;
margin-left:235px;
width:100px;
}

#floatMenu #show {
width:100px;
display:block;
border:1px solid #999;
background-color:transparent;
border-left:4px solid #999;
text-decoration:none;
border-color: #999999;
color:#ccc;
padding:5px 5px 5px 15px;
margin-left:235px;
width: 90px;
}
#floatMenu #show span a{
text-decoration: none;
color: #ccc
}
#floatMenu #show span a:HOVER{
text-decoration:underline;
color: blue;
}
#floatMenu #show:hover {
border-color:#f09;
}

</style>

<script type="text/javascript">

$(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 imgUrl = $(this).children().attr("src");
var tooltip = "<div id='tooltip'><img src='"+ imgUrl +"' alt='模板预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("slow"); //设置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>

<script type="text/javascript">
//以下这段便是浮动的实现，很简短,parseFloat是转换为number类型
var menuYloc = null;
var name = "#floatMenu";
$(document).ready(function(){
menuYloc = parseFloat($(name).css("top").substring(0,$(name).css("top").indexOf("px")));
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:300,queue:false});
});
});
</script>

</head>
<body>
<a href="#" class="tooltip"><img
src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="172"
height="80" /></a>
<div style="text-align: center;font-size: 300%;color: green;font-style: italic">鼠标放到google上，滑动鼠标</div>
<div id="floatMenu">
<div id="show">
<span id="span1"><a href="#" οnclick="return false;"> 上一页 </a>
</span>
<span id="span2"><a href="#" οnclick="return false;"> 下一页 </a>
</span>
</div>
</div >
</body>
</html>