body中:

 <img src="../images/icon_view.gif" bigimg="../img.jpg" title="查看预览图" class="imgtip" />
<script type="text/javascript">
//放大图片
$(function () {
var x = ;
var y = ;
$(".imgtip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var imgtip = "<div id='imgtip'><img src='" + $(this).attr("bigimg") + "' width='300' alt='预览图'/><\/div>"; //创建 div 元素
$("body").append(imgtip); //把它追加到文档中
$("#imgtip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function () {
this.title = this.myTitle;
$("#imgtip").remove(); //移除
}).mousemove(function (e) {
$("#imgtip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
});
</script>

JQuery鼠标移动上去显示预览图的更多相关文章

  1. win7图片只显示图标不显示预览图解决方案

    问题描述: win7上图片只显示图标,不显示缩略图:不管是调节小图.中图还是大图或者其他均不显示:而且这种情况下使用截图工具截下来的图片都不自动带上扩展名:情况如下图: 解决方案: 打开计算机-> ...

  2. 在GeoServer里设置图层的默认自定义样式,出现不显示预览图的情况(不起作用)

    在GeoServer里设置图层的默认自定义样式 点击"Layers-->world:country"图层,点击"Publishing"标签,在下面的&qu ...

  3. 可拖拽和带预览图的jQuery文件上传插件ssi-uploader

    插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...

  4. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  5. HTML5-video标签-实现点击预览图播放或暂停视频

    HTML5-video标签-实现点击预览图播放或暂停视频 刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性.这时我才真的发现到html5和css3的强大. 之前关 ...

  6. Jquery 下实现 图片大图预览效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. PHP如何生成文章预览图

    PHP如何生成文章预览图 一.总结 一句话总结:php的wkhtmltox扩展,php官方文档有怎么使用,或者github,或者百度,等等等等 wkhtmltox 1.PHP如何自动生成文章预览图? ...

  8. 资源管理器总是生成 avi,mpeg的预览图

    感觉非常讨厌. 图片可以直接显示,但是视频的预览图感觉很不舒服. 查了一下 , 用ShellExView 禁用一下 MF XXXX Property Handler 就可以了. 官网最下面可以下载: ...

  9. Jquery.Treeview+Jquery UI制作Web文件预览

    效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...

随机推荐

  1. 排序算法-python版

    总结了一下常见集中排序的算法 归并排序 归并排序也称合并排序,是分治法的典型应用.分治思想是将每个问题分解成个个小问题,将每个小问题解决,然后合并. 具体的归并排序就是,将一组无序数按n/2递归分解成 ...

  2. python基础13 ---函数模块3(正则表达式)

    正则表达式 一.正则表达式的本质 1.正则表达式的本质(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的 ...

  3. 小程序真机GET请求出现406错误

    问题:微信开发模拟器请求成功,获得数据,但是在真机上出现406请求错误,无法获得请求结果 原因:真机微信小程序的请求头与模拟器不同 怎么发现的:在请求头强制添加Accept即可解决 修复:在请求Hea ...

  4. 每天一个Linux命令(25)chgrp命令

          chgrp命令用来改变文件或目录所属的用户组. (1)用法:     用法:  chgrp  [选项参数] [组] [文件] 或 chgrp  [选项]   组文件...   POSIX ...

  5. cookie补充

    之前写cookie中关于突破同源策略共享cookie说的比较含糊,此次来详细说明一下: ## 首先说一下cookie的path和domain这 两个属性值 path: path表示的此条cookie是 ...

  6. Docker 单机网络

    Docker Network相关命令 root@ubuntu:~# docker network --help Usage: docker network COMMAND Manage network ...

  7. java入门了解11

    1.码表 (一)码表种类 ASCII:美国标准信息交换码,用一个字节的7位可以表示 ISO8859-1:拉丁码表.欧洲码表,用一个字节的8位表示,对ASCII没用到空间补充了自己特有的 GB2312: ...

  8. JSP<jsp:forward>与<%@ include%>

    JSP<jsp:forward>与<%@ include%><jsp:include> <jsp:forward file="forwardTo_p ...

  9. Javascript中 节流函数 throttle 与 防抖函数 debounce

    问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...

  10. java:eclipse4.4 安装tomcat插件

    一.Eclipse 4.4下载地址:http://www.eclipse.org/downloads/ (Eclipse官网).Eclipse4.4版本默认已经集成了Ant和Maven插件,这点挺不错 ...