效果：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. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  2. 《3D Math Primer for Graphics and Game Development》读书笔记1

    <3D Math Primer for Graphics and Game Development>读书笔记1 本文是<3D Math Primer for Graphics and ...

  3. Express4 启航指南

    确实有感而发,Nodejs真的发展太快了,这么说的原因有两点:自己去年冬天买了本<了不起的Node.js>,里面介绍Express的版本还是2.x.x:前些天小伙伴买了本<Node. ...

  4. 使用WCF的Trace与Message Log功能

      原创地址:http://www.cnblogs.com/jfzhu/p/4030008.html 转载请注明出处   前面介绍过如何创建一个WCF Service http://www.cnblo ...

  5. angularjs 2.0 快速开始

    前言 angularjs2.0 如果发布,公司的项目会基于2.0开发,在1.0的时候就踩了好多坑,趁这2.0还没正式发布,赶紧踩下坑. 这篇文章是参考angularjs2.0 官方文档写的,开发环境需 ...

  6. CPU占用率呈正弦实现,及实时输出进程和线程的CPU占用率

    CPU占用率呈正弦实现,及实时输出进程和线程的CPU占用率 #include "stdafx.h" #include <windows.h> #include < ...

  7. JavaScript中闭包之浅析解读

    JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常 ...

  8. 【hadoop2.2(yarn)】基于yarn成功执行分布式map-reduce，记录问题解决过程。

    hadoop2.x改进了hadoop1.x的架构, 具体yarn如何工作以及改进了什么可以在网上学, 这里仅记录我个人搭建的问题和理解,希望能帮助遇到困难的朋友. 在开始前,必须了解yarn版本的ma ...

  9. OpenCascade Draw Test Harness

    OpenCascade Draw Test Harness eryar@163.com Abstract. Draw is a command interpreter based on Tcl/Tk ...

  10. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...