效果：http://hovertree.com/texiao/jqimg/2/

效果图：

下载：http://hovertree.com/h/bjaf/jdaqepet.htm

HTML代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery实现点击小图弹出大图 - 何问起 </title><base target="_blank"/>

<link href="http://hovertree.com/texiao/jqimg/2/css/style.css" rel="stylesheet" type="text/css" />

<style>

body {

margin: 0;

padding: 0;

}

body img {

width: 300px;

height: 200px;

}#hovertreephoto a{color:cadetblue}

</style>

</head>

<body>

<div style="width:960px; margin:0 auto" id="hovertreephoto">

<h1>jQuery点击弹出大图，可以放大为原图，可以放大缩写和关闭。</h1>

<a href="http://hovertree.com/h/bjaf/i3ptrtqm.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效库</a><br />

<img class="test" src="http://hovertree.com/texiao/jqimg/2/photo/1.jpg" alt="">

<img class="test" src="http://hovertree.com/texiao/jqimg/2/photo/2.jpg" alt="">

<img class="test" src="http://hovertree.com/texiao/jqimg/2/photo/3.jpg" alt="">

</div>

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>

<script type="text/javascript" src="http://hovertree.com/texiao/jqimg/2/js/jquey-bigic.js"></script>

<script type="text/javascript">

$(function(){

$('#hovertreephoto img').bigic();

});

</script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/i3ptrtqm.htm

推荐：http://www.cnblogs.com/roucheng/p/datuceng.html

特效库：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery弹出美女大图片的更多相关文章

  1. jQuery弹出窗口浏览图片

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...

  2. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  3. jQuery弹出深色系层菜单

    低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...

  4. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  7. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  8. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  9. 3种jQuery弹出大图效果

    本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. HTML5- Canvas入门（一）

    周老虎落网的时候,网易跟腾讯都推出了牛逼轰轰的HTML5页面来展示其关系网(网易http://news.163.com/special/data_zyk/  ,腾讯http://news.qq.com ...

  2. 探索c#之一致性Hash详解

    阅读目录: 使用场景 算法原理 虚拟节点 代码示例 使用场景 以Redis为例,当系统需要缓存的内容超过单机内存大小时,例如要缓存100G数据,单机内存仅有16G时.这时候就需要考虑进行缓存数据分片, ...

  3. Unicode编码解码在线转换工具

    // Unicode编码解码在线转换工具 Unicode 是基于通用字符集(Universal Character Set)的标准来发展,并且同时也以书本的形式(The Unicode Standar ...

  4. oracle数据库的安装、配置与无残留卸载

    安装配置   :关闭专用网络防火墙 2 :以管理员身份运行安装文件 ——“setup.exe” 3 :设置口令    其中SYS 用户权限大于 SYSTEM 4 :先决条件检查,若验证成功,点击 ”下 ...

  5. .NET 基础 一步步 一幕幕 [.NET 简介]

    .NET 简介 .NET是 Microsoft XML Web services 平台.是微软用来实现XML,Web Services,SOA(面向服务的体系结构service-oriented ar ...

  6. C# BS消息推送 SignalR Hubs环境搭建与开发（二）

    1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 2. 开始开发 1)新建一个MVC项目,叫做SignalRDemo 2)安装SignalR包 In ...

  7. AJAX简介

    基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...

  8. Atitit 软件开发中 瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义

    Atitit 软件开发中 瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义 首先我们指明,任何一种行动以及教派修行方法都有他的多元化,只看到某一方面,就不能很好的评估利弊,适不适合自己使 ...

  9. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  10. 基于Fragment的百度地图框架的使用

    博客:http://blog.csdn.net/developer_jiangqq (一)基本介绍(Fragment和SupportMapFragment): Fragment的使用现在安卓APP开发 ...