<!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 123 买卖股票的最佳时机 III（三）

    123. 买卖股票的最佳时机 III 给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 两笔 交易. 注意: 你不能同时参与 ...

  2. 第四届蓝桥杯C++B组国(决)赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.猜灯谜 A 村的元宵节灯会上有一迷题: 请猜谜 * 请猜谜 = 请边赏灯边猜 小明想,一定是每个汉字代表一个数字,不同的汉字代表不同的 ...

  3. java实现最大五个数

    ** 最大5个数** [12,127,85,66,27,34,15,344,156,344,29,47,....] 这是某设备测量到的工程数据. 因工程要求,需要找出最大的5个值. 一般的想法是对它排 ...

  4. java代码（13） ---Predicate详解

    Predicate详解 遇到Predicate是自己在自定义Mybatis拦截器的时候,在拦截器中我们是通过反射机制获取对象的所有属性,在查看这些属性上是否有我们自定义的UUID注解 如果有该注解,那 ...

  5. PAT 换个格式输出整数

    让我们用字母 B 来表示“百”.字母 S 表示“十”,用 12...n 来表示不为零的个位数字 n,换个格式来输出任一个不超过 3 位的正整数.例如 234 应该被输出为BBSSS1234,因为它有 ...

  6. 如何0基础学习C/C++？

    谈及C/C++,功能强大.应用广泛,一旦掌握了后,若是再自学其他语言就显得轻而易举了.那为什么学C/C++的人少呢?很多人认为C/C++虽然博大精深,但也难学.其实就本人认为C/C++并非是“diff ...

  7. 使用Json框架解析遇到Java关键字时的解决方案

    当Json数据中的key为Java关键字时,在定义实体类的时候不能对该字段进行声明,所以需要对字段进行特殊处理 使用Gson解析 在与Java关键字冲突的字段加上@SerializedName注解 @ ...

  8. 【优雅写代码系统】springboot+mybatis+pagehelper+mybatisplus+druid教你如何优雅写代码

    目录 spring基本搭建 整合mybatis pom配置 mybatis配置 设置数据源 设置sqlsessionfactory 设置扫描 设置开启事务 资源放行 测试 结果 思考&& ...

  9. mysql 错误：Table is marked as crashed and should be repaired 解决办法

    遇到这个问题几个敲命令轻松搞定 1.首先进入mysql命令台: mysql -u root -p 回车 输入密码 2.查询所有的库 mysql> show databases; 3.进入数据库“ ...

  10. Looooops(求解同余方程、同余方程用法)【拓展欧几里得】

    Looooops(点击) A Compiler Mystery: We are given a C-language style for loop of type for (variable = A; ...