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. 读:Instance-aware Image and Sentence Matching with Selective Multimodal LSTM

    摘要:有效图像和句子匹配取决于如何很好地度量其全局视觉 - 语义相似度.基于观察到这样的全局相似性是由图像(对象)和句子(词)的成对实例之间的多个局部相似性的复合聚集,我们提出了一个实例感知图像和句子 ...

  2. python中的一些坑(待补充)

    函数默认参数使用可变对象 def use_mutable_default_param(idx=0, ids=[]): ids.append(idx) print(idx) print(ids) use ...

  3. iOS 展示 gif

    gif 图 是多张依次有连续动作的图 顺时间展示的一种动态效果图 .   有的是均匀时间更换下一张  有的 则不是均匀时间变化 1. 那么 对于均匀 时间变化的gif图 比较适合 使用 iOS 系统自 ...

  4. mysqldump导出格式

    #导出大表:mysqldump --add-drop-table --single-transaction --triggers -R -quick --disable-keys -utest -pt ...

  5. 算法(Algorithms)第4版 练习 1.5.8

    假设原id数组: 0 1 1 4 4 8 6 1 8 0 输入p = 5, q = 7 则输出结果会出错,最终为: 0 1 1 4 4 1 6 1 8 0 因为当id[p](id[5] = 8)被赋值 ...

  6. jquery 实现动态表单设计

    只是实现了前台页面的动态表单的设计,并未实现后台绑定数据到数据库等功能.技术使用到的为jquery和bootstrap.俗话说有图有真相,先说下具体效果如下: 点击添加一个面板容器: 容器添加成功: ...

  7. wiredtiger存储引擎介绍——本质就是LSM,当然里面也可以包含btree和列存储

    见:http://www.slideshare.net/profyclub_ru/4-understanding-and-tuning-wired-tiger-the-new-high-perform ...

  8. hbase_异常_02_hbase无法访问16010端口

    一.异常现象 上一个异常解决了之后,已经能正常启动hbase了,也能正常使用hbase shell  ,但是无法通过浏览器访问 16010端口. 二.异常原因 1.原因一 hbase 1.0 以后的版 ...

  9. Java钉钉开发_00_资源帖

    1.源码 本系列教程的源码已上传至GitHub:  https://github.com/shirayner/DingTalk_Demo 2.官方 官方源码:https://github.com/op ...

  10. Android数据存储的五种方法汇总

    本文介绍Android中的5种数据存储方式. 数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPreferences存储数据 2 ...