<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>

</head>

<style type="text/css">

	ul li{

		line-height: 1px;

		margin:3px;

		display:inline-block;

	}

</style>

<body>

    <div class="img">

    	<ul>

    		<li><a href="./i1.jpg" class="tooltip" title="苹果 ipad"><img src="./i1.jpg" alt="mac ipad" width="100" height="100" /></a></li>

    		<li><a href="./i2.jpg" class="tooltip" title="苹果 ipad"><img src="./i2.jpg" alt="mac ipad" width="100" height="100" /></a></li>

    	</ul>

    </div>

    <script type="text/javascript">

	$(function(){

		var x=8;

		var y=10;

		$("a.tooltip").mouseover(function(e){

			this.myTitle=this.title;

			this.title="";

			var imgtitle=this.myTitle?"<br/>"+this.myTitle:"";

			var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图' />"+imgtitle+"</div>";

			$("body").append(tooltip);

			$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");

		}).mouseout(function(){

			this.title=this.myTitle;

			$("#tooltip").remove();

		}).mousemove(function(e){

				$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});

		})

	})

</script>

</body>

</html>

　　

Jquery 下实现 图片大图预览效果的更多相关文章

  1. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  2. javascript实现 京东淘宝等商城的商品图片大图预览功能

    在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出现一 ...

  3. JavaScript实现图片裁剪预览效果~（第一个小玩具）

    感觉开始学习的前一个月真的太不珍惜慕课网的资源了  上面蛮多小玩意真的蛮适合我这样刚入门JavaScript的同学加深使用理解 大概收藏了百来门或大或小的课程  有一个感觉就是学这个真的比光是看书看概 ...

  4. javascript实现 京东淘宝等商城的商品图片大图预览功能（图片放大器）

      在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出 ...

  5. 微信小程序实现图片放大预览效果

    可以直接用微信程序自己的api很方便的实现 核心方法 wx.previewImage: 直接上代码, wxml: <!--pages/prewpicture/prew.wxml--> &l ...

  6. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  7. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  8. HTML5 原生API input file 来实现多图上传，并大图预览

    闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...

  9. javascript和HTML5上传图片之前实现预览效果

    一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...

随机推荐

  1. vert.x学习（四），使用模板解析器ClassLoaderTemplateResolver

    在vert.x中使用模板解析,可以为我们带来很多方便.我这里学习了一下ClassLoaderTemplateResolver的简单使用.这次工程配置与上篇一样,不需要做任何多的配置.直接编写代码就可以 ...

  2. 出售一套Unity + Lua热更新框架代码

    出售一套Unity + Lua的客户端框架代码,功能有资源管理.网络通信.配置文件解析.热更新.文件读写.Lua加密揭秘.UI框架.打包工具.编辑器工具等,已经在多个实际项目(已上线)中使用.代码优雅 ...

  3. Python学习笔记 for windows 三

    多重继承 继承是面向对象编程的一个重要的方式,因为通过继承,子类就可以扩展父类的功能. 哺乳类:能跑的哺乳类,能飞的哺乳类: 鸟类:能跑的鸟类,能飞的鸟类. class Animal(object): ...

  4. iOS10配置说明

    1:如果你的App想要访问用户的相机.相册.麦克风.通讯录等等权限,都需要进行相关的配置,不然会直接crash掉. 要想解决这个问题,只需要在info.plist添加NSContactsUsageDe ...

  5. SpringMVC常用配置-Controller中的各种配置（基于Java API和注解）

  6. 如何使用Profiler跟踪阻塞信息

    Blocked Process ReportProfiler提供一个被阻塞进程报告的事件Errors and Warnings->Blocked Process Report 指示某个任务已被阻 ...

  7. 几种获取IP 根据IP获取地址的方法 JS，第三方 新浪 网易 腾讯

    第一种是利用纯真ip数据库,这个可以在网上找到很多,缺点是更新有点慢. 第二种是利用门户网站的接口 目前已知的有腾讯.新浪.网易.搜狐和Google提供IP地址查询API,但是找得到的只有腾讯.新浪和 ...

  8. java环境变量的设置

    java安装好后需要配置一下环境变量,配置方法如下: 1.在系统变量里添加两条记录: 1)变量名:JAVA_HOME,变量值为java安装路径,如:C:\Program Files\Java\jdk1 ...

  9. git用.gitignore忽略指定文件

    .gitignore 配置文件用于配置不需要加入版本管理的文件,配置好该文件可以为我们的版本管理带来很大的便利,以下是个人对于配置 .gitignore 的一些心得. 1.配置语法: 以斜杠“/”开头 ...

  10. iOS APP开发的小知识(分享）

          亿合科技小编发现从2007年第一款智能手机横空出世,由此开启了人们的移动智能时代.我们从一开始对APP的陌生,到现在的爱不释手,可见APP开发的出现对我们的生活改变有多巨大.而iOS AP ...