jQuery--图片提示效果

最新推荐文章于 2024-04-15 08:33:14 发布

haiwei_sun

最新推荐文章于 2024-04-15 08:33:14 发布

阅读量687

点赞数

分类专栏： jquery 文章标签： function border xhtml html class div

本文链接：https://blog.csdn.net/helen_shw/article/details/5139599

版权

jquery 专栏收录该内容

102 篇文章 0 订阅

订阅专栏

<!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>
    <title>无标题页</title>
    <style type="text/css">
#tooltip{ border: 10px solid #990000; background-color: Maroon; width: 300px; height: 300px;}
</style>
    <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
    <script type="text/javascript">
        $(function(){
           var x=0;
           var y=20;
           $("a.tooltip").mouseover(function(e){
               this.myTitle=this.title;
               this.title="";
               var imgTitle=this.myTitle?" "+this.myTitle : "";
               var tooltip = "<div id='tooltip'><img width='300' height='300' src='"+this.href+"' alt='产品预览图' />"+imgTitle+"</div>";
               $("body").append(tooltip);
               $("#tooltip")
                   .css({
                    "top": (e.pageY-x)+"px",
                    "left": (e.pageX+y)+"px"
                   }).show("fast");
           }).mouseout(function(){
                this.title=this.myTitle;
                $("#tooltip").remove();
           }).mousemove(function(e){
              $("#tooltip")
                .css({
                   "top": (e.pageY-x)+"px",
                   "left": (e.pageX+y)+"px"
                });
           });

           });

    </script>
</head>
<body>
<ul>
<li><a href="images/a.jpg" class="tooltip" title="猪猪"><img width="200" height="200" src="images/a.jpg" alt="猪猪" border="0" /></a></li>
</ul>
</body>
</html>

haiwei_sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery--图片提示效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 无标题页 #tooltip{ border: 10px solid #990000; background-color: Maroon; width: 300px; height: 300px;}
复制链接

扫一扫