<!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. visual studio快捷键

    进行自动对齐操作[ctrl+k+f] 使用组合键“Ctrl+J”可以在不完全输入关键词时系统自动添加提示 注释用组合键“Ctrl+K+C” 取消注释用组合键“Ctrl+K+U” 设置断点---F9 启 ...

  2. [原创]Hadoop默认设置导致NameNode启动失败一例

    看到市面上很多书在讲解Hadoop的时候都轻描淡写的提到了HDFS的设置问题.大多采取的是默认设置,最多也就是设置一些副本数量之类. 笔者在工作中遇到了这样一种情况:每次重启系统之后,NameNode ...

  3. java 读写文件

    1. 读文件 import java.io.*; import java.util.*; public class test { public void test_readfile(String fi ...

  4. 《机电传动控制》PLC仿真

    1.红绿灯 经仿真,可以完成所设定的要求.对比普通的红绿灯,知识加了X25和X20的控制,来控制夜间模式 . 2.传送带 经仿真,可以完成所设定的要求. 总结:这两个仿真都是亲自完成,感觉难度有些大. ...

  5. xcode调整debug，release模式

    今天调试的时候发现变量都不能查看了.在「lldb」中通过「po」命令来查看总是提示变量未找到. 环境 xcode 7, Swift 2 错误提示 ‘XXXX’ was compiled with op ...

  6. Could not find class 'android.support.v4.view.ViewPager', referenced from me

    http://www.ithao123.cn/content-8236579.html 按照上面链接说的来做,弄完Clean一下项目,就可以运行.

  7. 【详解】ERP、APS与MES系统是什么？

    ERP是什么?MES是什么?APS又是什么?无论他们有什么功能,对企业有什么意义,不过都是计算机在读写一些数据而已.实际上这一切的本质不过是数据在硬盘和内存中快速的读和写. ERP是--,APS是-- ...

  8. 我的SpringMVC配置

    记住所有导的包都在org.springframework.web.servlet.mvc.annotation.下而不是 org.springframework.web.protlet.mvc.ann ...

  9. .net实现webservice简单实例分享

    原理:WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络应用间的交互.作用:主要用 ...

  10. setCapture只能作用于鼠标不可作用于键盘等其它事件

    处理的优点非常类似于流媒体的优点.分析能够立即开始,而不是等待所有的数据被处理.而且,由于应用程序只是在读取数据时检查数据,因此不需要将数据存储在内存中.这对于大型文档来说是个巨大的优点.事实上,应用 ...