<!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 87 扰乱字符串

    87. 扰乱字符串 给定一个字符串 s1,我们可以把它递归地分割成两个非空子字符串,从而将其表示为二叉树. 下图是字符串 s1 = "great" 的一种可能的表示形式. grea ...

  2. C++实现网络寻路

    标题:网络寻路 X 国的一个网络使用若干条线路连接若干个节点.节点间的通信是双向的.某重要数据包,为了安全起见,必须恰好被转发两次到达目的地.该包可能在任意一个节点产生,我们需要知道该网络中一共有多少 ...

  3. Mac上查看当前安卓手机上打开的app的包名和主程序入口

    1.连接上手机,数据线链接或者无线连接随便 2.打开你需要查看的app 3.打开终端,输入命令: adb shell dumpsys window w |grep \/ |grep name=

  4. Vue中解决新脚手架3创建项目的移动端双击屏幕放大，双手拉动放大的方法

    替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head ...

  5. （前端）angular报错日常以及记录日常

    目录1 json的key...value问题 遍历json的key...value的时候报错: [tslint] for (... in ...) statements must be filtere ...

  6. Python字符串处理 - str/bytes

    目录 1. str 2. bytes / bytearray 3. printf-style String Formatting 1. str homepage str.count(sub[, sta ...

  7. 【Android】使用Appium+python控制真机，碰到的问题以及处理（持续更新）

    问题: selenium.common.exceptions.WebDriverException: Message: A new session could not be created. (Ori ...

  8. C# 9.0 新特性之目标类型推导 new 表达式

    阅读本文大概需要 2 分钟. 呼~~,每次过完一个周末,写作就失去了动力,一两天才能缓过来.尽管如此,还是要坚持写好每一篇文章的.宁缺毋滥嘛,宁愿发文的频率低一点,也要保证文章的质量,至少排版不能差, ...

  9. 8种排序算法 Java实现

    冒泡排序 O(n2) 两个数比较大小,较大的数下沉,较小的数冒起来. public static void bubbleSort(int[] a) { //临时变量 int temp; //i是循环次 ...

  10. Linux下搭建redis(源码编译)

    [准备环境] Linux centos7 redis下载包  地址:http://www.redis.cn/download.html  前往下载稳定版本 [步骤] 1.下载成功后 把包上传到服务器 ...