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. 【转载】Spring介绍之二

    Spring框架,是进行对象管理,对象关联,解耦的一个中间层框架.SSH(Struts+Spring+Hibernate)三大Spring在中间就起着一个承上启下的作用.好,首先我们先来看一下Spri ...

  2. flex 特性

    flex grow 分配的比例是对整体,比如 A grow 3  B grow 4,A连同margin一块是3

  3. 自定义jsonp请求数据

    整理代码的时候发现一个以前写的实现jsonp请求方法,放在这里分享一下~ 原理:通过js新建script dom对象,利用src携带参数和callback方法,将数据发送至后端,需要后端配合将数据放在 ...

  4. js琐碎知识点

    1.javascript发展史 javascript首先由Netscape设计,为改善浏览器用户体验,名为liveScript, 网景公司被sun公司收购,为了宣传改名为javascript 后来su ...

  5. jQuery图片水平滑动延迟加载动画

    在线演示 本地下载

  6. HDU OJ 2159 FATE

    #include <stdio.h> #include <string.h> ][] ; ]; //»ñµÃ¾­Ñé ]; //»¨·ÑµÄÈÌÄÍ¶È int main() ...

  7. 剑指offer之 替换空格

    package Problem4; public class ReplaceBank { /* * 题目描述: 请实现一个函数,将字符串的每个空格替换为"%20". * 例如输入& ...

  8. Java -- 内部类, 成员内部类,局部内部类,匿名内部类,闭包和回调, 枚举类

    1. 成员内部类分为  静态内部类 和 非静态内部类. 非静态内部类 和 外部类的其他成员一样处理, 非静态内部类可以访问外部类的private的属性,而外部类不能访问非静态内部类的属性,需要实例非静 ...

  9. python第八篇:十分钟学会Flask

    什么是Flask Flask是一个基于Python并且依赖于Jinja2模板引擎和Werkzeug WSGI服务的一个微型框架 Flask中包含一个轻量级的web 服务器主要用于在开发阶段测试使用 F ...

  10. 分享知识-快乐自己:N及分类(双重循环、递归)实现

    实现多级分类: 1.双重 for 循环实现 N 及分类 /*** * 执行遍历 * * @param menus * 所有权限列表集合 * @param list * 指定角色查询到的 权限Id * ...