JQuery鼠标移动上去显示预览图
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鼠标移动上去显示预览图的更多相关文章
- win7图片只显示图标不显示预览图解决方案
问题描述: win7上图片只显示图标,不显示缩略图:不管是调节小图.中图还是大图或者其他均不显示:而且这种情况下使用截图工具截下来的图片都不自动带上扩展名:情况如下图: 解决方案: 打开计算机-> ...
- 在GeoServer里设置图层的默认自定义样式,出现不显示预览图的情况(不起作用)
在GeoServer里设置图层的默认自定义样式 点击"Layers-->world:country"图层,点击"Publishing"标签,在下面的&qu ...
- 可拖拽和带预览图的jQuery文件上传插件ssi-uploader
插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...
- jQuery+Ajax实现图片的预览和上传
jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...
- HTML5-video标签-实现点击预览图播放或暂停视频
HTML5-video标签-实现点击预览图播放或暂停视频 刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性.这时我才真的发现到html5和css3的强大. 之前关 ...
- Jquery 下实现 图片大图预览效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- PHP如何生成文章预览图
PHP如何生成文章预览图 一.总结 一句话总结:php的wkhtmltox扩展,php官方文档有怎么使用,或者github,或者百度,等等等等 wkhtmltox 1.PHP如何自动生成文章预览图? ...
- 资源管理器总是生成 avi,mpeg的预览图
感觉非常讨厌. 图片可以直接显示,但是视频的预览图感觉很不舒服. 查了一下 , 用ShellExView 禁用一下 MF XXXX Property Handler 就可以了. 官网最下面可以下载: ...
- Jquery.Treeview+Jquery UI制作Web文件预览
效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...
随机推荐
- 【深度学习】ubuntu16.04下安装opencv3.4.0
1.首先安装一些编译工具 # 安装编译工具 sudo apt-get install build-essential # 安装依赖包 sudo apt-get install cmake git li ...
- CSS3图片悬停放大动画
在线演示 本地下载
- 常用JQuery设置HTML元素内容
主要内容: 一.获取内容及属性 二.设置内容及属性 三.添加元素 四.删除元素 五.css()方法 六.寻找祖先及后代 一.获取内容及属性 二.设置内容及属性 相对于获取内容及属性的方式,只需在函数内 ...
- 希尔排序(Shell Sort)
一.思路 希尔排序是基于插入排序算法,通过允许不相邻的元素进行交换这一简单的改进,使数组变为局部有序,最终再用插入排序. 希尔排序的思想是使数组中任意间隔h的元素都是有序的.这样的数组被称为h有序数组 ...
- QT 巧用QSignalMapper分类有序地处理大量信号
转自--> http://blog.csdn.net/cuteqt/article/details/4306900 QSignalMapper这个类并不是个新鲜概念, 早在Qt2里就已经存在, ...
- 红米note.线刷
1.第一代 红米note 时间:20180121 这次 线刷之后,摄像头还是模糊,扫描小一点的二维码的时候 还是一片模模糊糊... 2.ZC:我下载的“通用刷机工具”名为:MiFlash2017-12 ...
- 仿联想商城laravel实战---1、仿联想商城需求和数据库设计(lavarel如何搭建项目)
仿联想商城laravel实战---1.仿联想商城需求和数据库设计(lavarel如何搭建项目) 一.总结 一句话总结: composer引入lavarel.配置域名.配置apache 1.项目名 le ...
- UniDAC 的 RecordCount 属性注意事项
一直以来都是用UniDAC作为数据库查询组件,而一般的写法都是这样: UniQuery_sqlite.close; UniQuery_sqlite.SQL.Clear; UniQuery_sqlite ...
- PHP限制IP访问 只允许指定IP访问 允许*号通配符过滤IP
/** * 检测访问的ip是否为规定的允许的ip * Enter description here ... */ function check_ip(){ $ALLOWED_IP=array('192 ...
- iframe弹出层中关闭包含iframe的div(子页面调用父页面js函数)
父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;" ...