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 ...
随机推荐
- 【转载】Spring介绍之二
Spring框架,是进行对象管理,对象关联,解耦的一个中间层框架.SSH(Struts+Spring+Hibernate)三大Spring在中间就起着一个承上启下的作用.好,首先我们先来看一下Spri ...
- flex 特性
flex grow 分配的比例是对整体,比如 A grow 3 B grow 4,A连同margin一块是3
- 自定义jsonp请求数据
整理代码的时候发现一个以前写的实现jsonp请求方法,放在这里分享一下~ 原理:通过js新建script dom对象,利用src携带参数和callback方法,将数据发送至后端,需要后端配合将数据放在 ...
- js琐碎知识点
1.javascript发展史 javascript首先由Netscape设计,为改善浏览器用户体验,名为liveScript, 网景公司被sun公司收购,为了宣传改名为javascript 后来su ...
- jQuery图片水平滑动延迟加载动画
在线演示 本地下载
- HDU OJ 2159 FATE
#include <stdio.h> #include <string.h> ][] ; ]; //»ñµÃ¾Ñé ]; //»¨·ÑµÄÈÌÄÍ¶È int main() ...
- 剑指offer之 替换空格
package Problem4; public class ReplaceBank { /* * 题目描述: 请实现一个函数,将字符串的每个空格替换为"%20". * 例如输入& ...
- Java -- 内部类, 成员内部类,局部内部类,匿名内部类,闭包和回调, 枚举类
1. 成员内部类分为 静态内部类 和 非静态内部类. 非静态内部类 和 外部类的其他成员一样处理, 非静态内部类可以访问外部类的private的属性,而外部类不能访问非静态内部类的属性,需要实例非静 ...
- python第八篇:十分钟学会Flask
什么是Flask Flask是一个基于Python并且依赖于Jinja2模板引擎和Werkzeug WSGI服务的一个微型框架 Flask中包含一个轻量级的web 服务器主要用于在开发阶段测试使用 F ...
- 分享知识-快乐自己:N及分类(双重循环、递归)实现
实现多级分类: 1.双重 for 循环实现 N 及分类 /*** * 执行遍历 * * @param menus * 所有权限列表集合 * @param list * 指定角色查询到的 权限Id * ...