管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　超链接提示效果：

　　

复制代码 代码如下:

　　<script type="text/javascript">

　　//<![CDATA[

　　$(function(){

　　var x = 10;

　　var y = 20;

　　$("a.tooltip").mouseover(function(e){

　　this.myTitle = this.title;

　　this.title = "";

　　var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/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>

　　图片提示效果：

　　

复制代码 代码如下:

　　<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 = "<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>

教程首页 更多教程