jQuery PC端图片预览,鼠标移上去查看大图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery图片预览</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var ShowImage = function() {
xOffset = 10;
yOffset = 30;
jQuery("#imglist").find("img").hover(function(e) {
jQuery("<img id='imgshow' src='" + this.src + "' />").appendTo("body");
jQuery("#imgshow")
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")
.fadeIn("fast");
}, function() {
jQuery("#imgshow").remove();
}); jQuery("#imglist").find("img").mousemove(function(e) {
jQuery("#imgshow")
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")
});
}; jQuery(document).ready(function() {
ShowImage();
});
</script>
<style type="text/css">
body{ width:600px; margin:0 auto;}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
#imglist img{width:150px;height:120px;}
#imgshow{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
color:#fff;
display:none;
}
</style>
</head>
<body>
<h4>asdfasd</h4>
<ul id="imglist">
<li><a><img src="img/home_list1.png" alt="" /></a></li>
<li><a><img src="img/home_list2.png" alt="" /></a></li>
</ul>
</body>
</html>
jQuery PC端图片预览,鼠标移上去查看大图的更多相关文章
- Vue PC端图片预览插件
*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- HTML5浏览器端图片预览&生成Base64
本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...
- jquery.uploadView 实现图片预览上传
图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...
- jq移动端图片预览 (fly-zomm-img.js)
效果图: ===>==> 里面还与很多属性设置: index 关闭按钮等等 代码: //html-----------------------<div class="he ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- jquery解决file上传图片+图片预览
js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...
- jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...
- dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...
随机推荐
- bzoj 2726 任务安排
题目大意: 机器上有N个需要处理的任务,它们构成了一个序列 把这些任务分成若干批 从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti 在每批任务开始前,机器需要启动时间S,而完成这批 ...
- HDU1402:A * B Problem Plus(FFT与大数乘法)
Calculate A * B. Input Each line will contain two integers A and B. Process to end of file. Note: th ...
- 循环冗余检验 (CRC) 算法原理
Cyclic Redundancy Check循环冗余检验,是基于数据计算一组效验码,用于核对数据传输过程中是否被更改或传输错误. 算法原理 假设数据传输过程中需要发送15位的二进制信息g=10100 ...
- 洛谷 P1082 同余方程 —— exgcd
题目:https://www.luogu.org/problemnew/show/P1082 用 exgcd 即可. 代码如下: #include<iostream> #include&l ...
- 使用node.js在sublime text3搭建服务器
问题描述: 使用node.js在sublime text3中搭建好服务器后,第一次使用“ctrl+b”运行服务器没有问题,如图所示 如果想对test.js中的内容做些许修改,保存后再使用“ctrl+b ...
- [App Store Connect帮助]八、维护您的 App(2)将 App 从 App Store 中移除
如果您不想继续向顾客提供您的 App,您可以将其从 App Store 中移除,这样会移除该 App 的所有版本.拥有该 App 先前版本的用户将无法更新 App,但只要您的合约有效,用户便仍可下载最 ...
- 《Windows核心编程系列》十四谈谈默认堆和自定义堆
堆 前面我们说过堆非常适合分配大量的小型数据.使用堆可以让程序员专心解决手头的问题,而不必理会分配粒度和页面边界之类的事情.因此堆是管理链表和数的最佳方式.但是堆进行内存分配和释放时的速度比其他方式都 ...
- apache单ip多域名多目录配置
自己的vps上放了别人的网站,那怎么样让自己的网站和别人的网站能同时被访问呢?需要使用apache的虚拟主机配置. 配置httpd.conf文件 比如原来是这种只是指向一个目录的配置 Document ...
- Sgu294He's Circles
Description 有一个长度为N的环,上面写着'X'和'E',问本质不同的环有多少种.(N不超过200000). Input The input file contains a single i ...
- TCP/IP网络协议基础
实验楼学习网络协议传送门 一.TCP/IP简介 TCP/IP(Transmission Control Protocol/Internet Protocol)是传输控制协议和网络协议的简称,它定义了电 ...