<!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" />

    <title>jQuery图片预览</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">

        var ShowImage = function() {

            xOffset = 10;

            yOffset = 30;

            jQuery("#imglist").find("img").hover(function(e) {

                jQuery("<img id='imgshow' src='" + this.src + "' />").appendTo("body");

                jQuery("#imgshow")

                    .css("top", (e.pageY - xOffset) + "px")

                 .css("left", (e.pageX + yOffset) + "px")

           .fadeIn("fast");

            }, function() {

                jQuery("#imgshow").remove();

            });

            jQuery("#imglist").find("img").mousemove(function(e) {

                jQuery("#imgshow")

                   .css("top", (e.pageY - xOffset) + "px")

             .css("left", (e.pageX + yOffset) + "px")

            });

        };

        jQuery(document).ready(function() {

            ShowImage();

        });

    </script>

    <style type="text/css">

        body{ width:600px; margin:0 auto;}

        img{border:none;}

        ul,li{

         margin:0;

         padding:0;

        }

        li{

         list-style:none;

         float:left;

         display:inline;

         margin-right:10px;

        }

        #imglist img{width:150px;height:120px;}

        #imgshow{

         position:absolute;

         border:1px solid #ccc;

         background:#333;

         padding:5px;

         color:#fff;

         display:none;

     }

    </style>

</head>

<body>

<ul id="imglist">

    <li><a><img src="http://www.jquery001.com/images/demo/35624390.jpg" alt="安以轩" /></a></li>

    <li><a><img src="http://www.jquery001.com/images/demo/35624390.jpg" alt="安以轩" /></a></li>

</ul>

</body>

</html>

原文地址：http://www.jquery001.com/jquery-image-preview.html

JQuery预览图片的更多相关文章

  1. [js/jquery]移动端手势拖动，放大，缩小预览图片

    摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度 ...

  2. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  3. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  4. Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...

  5. Thinkphp5+plupload图片上传功能，支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  6. 上传预览图片的插件jquery-fileupload

    上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...

  7. 异步上传&预览图片-不压缩图片

    本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...

  8. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  9. ftp如何预览图片 解决方案

    下载使用 server-U ,开启 HTTP 服务,输入 http://ip:端口 后,登录ftp账号密码,可选使用 基于java的应用 web client 或 FTP Voyager JV,来预览 ...

随机推荐

  1. Java实现 LeetCode 350 两个数组的交集 II（二）

    350. 两个数组的交集 II 给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入 ...

  2. Git Gui工具从远程克隆代码总是提示路径已经存在。问题完美解决！

    最近使用Git Gui工具从远程克隆代码总是提示路径已经存在,提示如下图, 原因是使用Git Guii克隆代码时的路径不能是选择一个已经建好的目录(D盘的project下的test文件夹是我提前建好的 ...

  3. tensorflow2.0学习笔记

    今天我们开始学习tensorflow2.0,用一种简单和循循渐进的方式,带领大家亲身体验深度学习.学习的目录如下图所示: 1.简单的神经网络学习过程 1.1张量生成 1.2常用函数 1.3鸢尾花数据读 ...

  4. 【python-opencv】读取、显示、写入图像

    1.读取图像 import cv2 image=cv2.imread("dog2.jpg",1) 说明: 第二个参数是一个标志,它指定了读取图像的方式. cv.IMREAD_COL ...

  5. 01 . Docker原理部署及常用操作命令

    Docker的来源及构造: 容器是一种基础工具:泛指任何用于容纳其他物品的工具,可以部分或完全封闭,被用于容纳,储存,运输物品: 物品可以被放置在容器中,而容器可以保护内容物: 人类使用容器的历史有十 ...

  6. Maven和Gradle如何添加依赖

    仓库地址:https://mvnrepository.com

  7. springboot整合Mybatis（有xml）

    pom.xml <!-- mybatis 支持 SpringBoot --> <dependency> <groupId>org.mybatis.spring.bo ...

  8. filter()函数过滤序列

    ''' Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据 ...

  9. 随机抽样一致性（RANSAC）算法详解

    随机抽样一致性(RANSAC)算法能够有效的剔除特征匹配中的错误匹配点. 实际上,RANSAC能够有效拟合存在噪声模型下的拟合函数.实际上,RANSAC算法的核心在于将点划分为“内点”和“外点”.在一 ...

  10. gdb基本命令总结

    本文介绍使用gdb调试程序的常用命令.  主要内容: [简介] [举例] [其他] [简介]  ============= GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.如果你是在 ...