<!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="js/jquery-1.7.1.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>

<h4>asdfasd</h4>

<ul id="imglist">

    <li><a><img src="img/home_list1.png" alt="" /></a></li>

    <li><a><img src="img/home_list2.png" alt="" /></a></li>

</ul>

</body>

</html>

jQuery PC端图片预览，鼠标移上去查看大图的更多相关文章

  1. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

  2. js实现移动端图片预览：手势缩放， 手势拖动，双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  3. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  4. jquery.uploadView 实现图片预览上传

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...

  5. jq移动端图片预览 (fly-zomm-img.js)

    效果图: ===>==> 里面还与很多属性设置: index  关闭按钮等等 代码: //html-----------------------<div class="he ...

  6. 移动端 H5 拍照 从手机选择图片，移动端预览，图片压缩，图片预览，再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  7. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  8. jquery实现上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...

  9. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

随机推荐

  1. 网络编程-获取ip-解析ip

    import java.net.InetAddress; import java.net.UnknownHostException; /** * 查询ip地址 * * @author chengluc ...

  2. [QT开发小结]LNK1104: cannot open file ‘gdi32.lib’ 解决方法

    1.环境变量 : Path = ;C:\Program Files (x86)\Microsoft SDKs\Windows\v7.1A\Bin; 添加变量: INCLUDE = C:\Program ...

  3. 如何判断http服务器是否支持range寻址

    如果向支持range寻址的http服务器发带range的请求 ,会有什么结果呢?是否有错误返回?数据怎么下载? 诸葛小炎fire | 浏览 569 次   您的回答被采纳后将获得: 系统奖励20(财富 ...

  4. bzoj 4668 冷战 —— 并查集按秩合并

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4668 按秩合并维护并查集的树结构,然后暴力找路径上的最大边权即可. 代码如下: #inclu ...

  5. bzoj 3232 圈地游戏 —— 01分数规划+最小割建图(最大权闭合子图)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3232 心烦意乱的时候调这道题真是...越调越气,就这样过了一晚上... 今天再认真看看,找出 ...

  6. less 使用入门

    LESSS是基于JavaScript,所以,是在客户端处理的. 使用less很简单: 1 下载less.js 2 新建less文件后缀名称是.less 3 在页面中引入less文件,跟引入普通的css ...

  7. Navicat: Can't create a procedure from within another stored routine

    测试调用mysql的存储过程,于是用Navicat写,结果报这个错误,源代码如下: CREATE PROCEDUREQueryDate() BEGIN       SELECTCURDATE(); E ...

  8. jstree获取半选中节点的方法

    $('#jstree1').jstree().get_undetermined();返回一个数组,getPara();方法无法获取数组 get_undetermined ([full])  get a ...

  9. CodeForces 730A Toda 2 (模拟)

    题意:给定一个序列,现在你每次至多给5个人的权值减小1,最少2个人,最小是0,使得剩下的所有权值都相等且尽量大. 析:用multiset来模拟,每次取权值最大的三个或者两个,直到最后相等.我开始没有这 ...

  10. U3D中碰撞体和刚体的关系

    1.刚体是用来接受力作用的组件: 2.碰撞体是碰撞系统用来检测碰撞的组件: 碰撞产生碰撞信息,游戏物体根据碰撞信息生成一个力作用在刚体上,刚体受力后就会产生一个速率,最终在游戏物体的运动体现出来. 也 ...