<!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实现 蓝桥杯 算法提高 拿糖果

    算法提高 拿糖果 时间限制:1.0s 内存限制:256.0MB 问题描述 妈妈给小B买了N块糖!但是她不允许小B直接吃掉. 假设当前有M块糖,小B每次可以拿P块糖,其中P是M的一个不大于根号下M的质因 ...

  2. 第五届蓝桥杯JavaA组省赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.猜年龄 题目描述 小明带两个妹妹参加元宵灯会.别人问她们多大了,她们调皮地说:"我们俩的年龄之积是年龄之和的6倍" ...

  3. java实现平面点最小距离

    已知平面上若干个点的坐标. 需要求出在所有的组合中,4个点间平均距离的最小值(四舍五入,保留2位小数). 比如有4个点:a,b,c,d, 则平均距离是指:ab, ac, ad, bc, bd, cd ...

  4. MAC/VMware配置双机调试简述

    Configuration 注:建议提前备份所有修改内容,可能会导致无法开机. 我的测试环境: server: windows 10 + windbg client: windows 7 Server ...

  5. SpringCloud+Ehcache

    1.pom文件引入 <!-- https://mvnrepository.com/artifact/org.ehcache/ehcache --><dependency>< ...

  6. 传递函数-微分方程-差分方程-Matlab阶跃响应曲线

    Transfer function: 1 ------- 5 s + 1 写成微分方程: 5y'(t)+y(t)=u(t) 向前差分: 5y(k+1)+(T-5)y(k)=Tu(k) T:Sample ...

  7. sql server 取多条数据的最大值

    实列: SELECT a.BillDate '[开票时间]', a.Hdbh '[运单号]', a.Status '运单状态', a.DisplayStatus '运单状态字', b.name '开票 ...

  8. 如何修改npm仓库地址

    解决方案 npm config set registry http://registry.npm.taobao.org/ 将npm默认设置为淘宝镜像地址 发布包 当你想发布自己的包时,需要将地址修改回 ...

  9. 如何优雅的用js动态的添加html代码?

    把想要的结构写在HTML里,用一个display:none的标签来包裹. 一般而言,会使用: 不设置为type="text/javascript"的script标签 textare ...

  10. 别人开发三年30k，而我才12K，看完他面试前狂刷的面试题，我惊了

    朋友做Java开发三年多的时间了,在老东家勤勤恳恳工作了三年多,工资也就是从刚开始的8K涨到了12K,天天给我吐槽他的工资低.2019年中下旬开始就一直在各种地方找资源,刷面试题,想要“骑驴找马”,所 ...