<!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 stdio 2015安装配置及原理

    安装与配置: 1.先配置好IIS,再安装visual stdio,主要原因系统会自注册.net Framework,若顺序不正确,则需手动注册,步骤: a. IIS可承载的Web核心 b. IIS6 ...

  2. swift 资料

    swift 开源代码学习 https://github.com/belm/BaiduFM-Swift http://www.cnblogs.com/zzc19920809/p/4881268.html ...

  3. Git & Gitlab 使用指南

    2016-02-23   |   9,129字   |   分类于 工具  |   3条评论 去年小组在从 SVN 和 TFS 迁移到 Git 的过程中整理了这份文档,面向的用户是对 Git 和 SV ...

  4. SQL编码乱码解决方法

    摘自 http://www.cnblogs.com/keke/archive/2011/08/05/2128557.html 使用SQL SERVER2005的时候常常遇到中文字符为乱码的情况,经过研 ...

  5. idea使用心得(3)-重构初探

    上一篇idea心得中,介绍了快捷键的用法.其中提及了重构神器Alt+Ctrl+Shift+T , 当时只是稍稍提及,本文重点在idea提供的重构选项.后续会有<重构,改善既有代码的设计>的 ...

  6. php 登录注册api接口代码

    /** *一览(www.yl1001.com) * PHP开发API接口 服务端 */ require 'conn.php'; //连接数据库的文件 header('Content-Type:text ...

  7. Google Supersonic列存储查询库的介绍、安装、测试

    查询引擎库介绍: http://www.infoq.com/cn/news/2012/10/Google-Supersonic/ Supersonic是一个面向列存储数据库的查询引擎库,它提供了一组数 ...

  8. JAVAWEB项目如何实现验证码

    验证码基础 一.什么是验证码及它的作用 :验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计算机的公共全自动程序,这个问题可以由计算机生成并评判,但是必须只有人类才能解答.可以防止恶意 ...

  9. Python之路----------内置函数

    1.abs(x)绝对值 #coding=utf-8 a = 1 b = -2 print(abs(a)) print(abs(b)) 2.all(iterable)可迭代对象里面所有内容为真返回真,空 ...

  10. 使用MapReduce实现join操作

     在关系型数据库中,要实现join操作是非常方便的,通过sql定义的join原语就可以实现.在hdfs存储的海量数据中,要实现join操作,可以通过HiveQL很方便地实现.不过HiveQL也是转化成 ...