效果：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. Mono 3.2 测试NPinyin 中文转换拼音代码

    C#中文转换为拼音NPinyin代码  在Mono 3.2下运行正常,Spacebuilder 有使用到NPinyin组件,代码兼容性没有问题. using System; using System. ...

  2. C#设计模式之观察者

    Iron之观察者 引言 上一篇说的职责链模式,很有意思的一个模式,今天这个模式也是很有意思的一个模式,还是不啰嗦了直接进入主题吧. 场景介绍:在上一遍中说到用到部件检测,很巧妙的让调用者和处理者解耦了 ...

  3. SQL语句到底是怎么执行的

    写在前面的话:有时不理解SQL语句各个部分执行顺序,导致理解上出现偏差,或者是书写SQL语句时随心所欲,所以有必要了解一下sql语句的执行顺序.可以有时间自己写一个简单的数据库,理解会更加深入.下面就 ...

  4. ystep jQuery流程、步骤插件

    今天小菜给大家带来又一款给力jQuery插件:ystep. 从名称上大致可以看出,这是一个流程步骤插件. 如果无意外的话,这可能是小菜近期最后一个作品了...苦逼的小菜即将创业,可能就没时间折腾啦~好 ...

  5. 我所记录的git命令（非常实用）

    一.前言 记录一下工作中常用到的git命令,只是简单的笔记,欢迎大家交流... [ 顺便问下园友们,怎么感觉博客园发布的博客搜索有时都搜不到,后台编辑能填的都填写了,还是觉得搜索排名不高? 相同的标题 ...

  6. Linux下安装Java环境配置步骤详述

    0.下载jdk8 登录网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html选择对 ...

  7. 移动混合应用HTML5数据查询优化

    项目介绍 pheongap混合应用,跨平台,做应用加工厂提供应用模板编辑器~ 本地应用,完全是模拟IOS,安卓原生应用的实现,所以支持14种手势,所有PPT动画,视觉差效果,等等功能组合... 这是I ...

  8. KNN算法

    1.算法讲解 KNN算法是一个最基本.最简单的有监督算法,基本思路就是给定一个样本,先通过距离计算,得到这个样本最近的topK个样本,然后根据这topK个样本的标签,投票决定给定样本的标签: 训练过程 ...

  9. dev c++ Boost库的安装

    dev c++ 的boost库的安装步骤 然后点击“check for updates”按钮 最后点击“Download selected”按钮,下载完成后安装.... 给dev添加boost库文件, ...

  10. Android获取内置sdcard跟外置sdcard路径

    Android获取内置sdcard跟外置sdcard路径.(测试过两个手机,亲测可用) 1.先得到外置sdcard路径,这个接口是系统提供的标准接口. 2.得到上一级文件夹目录 3.得到该目录的所有文 ...