<!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. throw exception

    Throw new CustomerException('Customer message'); // App\Exceptions\Handler.php public function rende ...

  2. laravel DB事物

    public function store(Request $request, $id) { $externalAccount = ExternalAccounts::find($id); DB::b ...

  3. Spark部署三种方式介绍：YARN模式、Standalone模式、HA模式

    参考自:Spark部署三种方式介绍:YARN模式.Standalone模式.HA模式http://www.aboutyun.com/forum.php?mod=viewthread&tid=7 ...

  4. 使用postman发送数据并构建collections执行测试

    1.安装 下载地址:https://www.getpostman.com/.直接安装,成功后在chorme的应用程序中会多出一个Postman.如果无法在google store上直接安装,可以下载. ...

  5. IOS手动添加CoreData

    手动添加coreData: 1.在target-build phrase-Link binary with libraries里增加CoreData Framework 2.加入数据模型:comman ...

  6. orange pi pc 体验（一）

    最近在淘宝上看到一款和树莓派差不多的卡片机,定价才99元,而且是国产的,忍不住入手了一个,就是orange pi 感兴趣的可以百度搜索下,深圳一个公司出的,不过资料比树莓派少了很多,论坛中人也没多少, ...

  7. PHP发送和接收POST数据

    1. 发送post数据 $data = '{ "id": "17999030", "method": "sayHello" ...

  8. Javascript Promise入门

    是什么? https://www.promisejs.org/ What is a promise? The core idea behind promises is that a promise r ...

  9. C# 获取汉字拼音首字母

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   本节探讨C#获取汉字拼音首字母的方法: 代码类东西, ...

  10. 比较常用到的一些linux命令行

    find ./ -type f -name "*.c" | xargs grep -l "tm_common_ctrl_init_chip_init"     ...