jQuery学习笔记3 图片预览

最新推荐文章于 2018-08-17 14:32:00 发布

皮卡卡

最新推荐文章于 2018-08-17 14:32:00 发布

阅读量450

点赞数

分类专栏： jQuery学习笔记文章标签： jquery class function xhtml server div

本文链接：https://blog.csdn.net/o_pikaka/article/details/7945603

版权

jQuery学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo6.aspx.cs" Inherits="jQuery.demo6" %>

<!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 runat="server">
    <title>图片预览</title>
    <style type="text/css">
        img.imgF
        {
            width: 100px;
            height: 100px;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var x = 10;
            var y = 20;
            $("a.tooltip").mouseover(function (e) {
                var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/></div>";

                $("body").append(tooltip);
                //                $("#tooltip").css({
                //                    "top": (e.pageY + y) + "px",
                //                    "left": (e.pageX + x) + "px"
                //                }).show("fast");   没起作用啊

            }).mouseout(function () {
                $("#tooltip").remove();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="divA">
        <a href="images/1.jpg" class="tooltip" title="这是我的超链接提示1.">
            <img src="images/1.jpg" class="imgF" />
        </a><a href="images/2.jpg" class="tooltip" title="这是我的超链接提示2.">
            <img src="images/2.jpg" class="imgF" /></a> <a href="images/3.jpg" title="这是自带提示1."
                class="tooltip">
                <img src="images/3.jpg" class="imgF" /></a> <a href="images/4.jpg" title="这是自带提示2."
                    class="tooltip">
                    <img src="images/4.jpg" class="imgF" /></a>
    </div>
    </form>
</body>
</html>

皮卡卡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记3 图片预览

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 图片预览 img.imgF { width: 100px; height: 100px;
复制链接

扫一扫

专栏目录