当前位置: 移动技术网 > IT编程>开发语言>JavaScript > jquery实现网站超链接和图片提示效果

jquery实现网站超链接和图片提示效果

2018年09月12日  | 移动技术网IT编程  | 我要评论
超链接提示效果: . 代码如下: <script type="text/javascript"> //<![cdata[ $(function(){ var

超链接提示效果:

. 代码如下:


<script type="text/javascript">
//<![cdata[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouver(function(e){
this.mytitle = this.title;
this.title = "";
var tooltip = "<p id='tooltip'>"+ this.mytitle +"<\/p>"; //创建 p 元素
$("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>


图片提示效果:

. 代码如下:


<script type="text/javascript">
//<![cdata[
$(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 = "<p id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgtitle+"<\/p>"; //创建 p 元素
$("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>

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网