3种jQuery弹出大图效果
本实例用到了jquery.imgbox.pack.js库。直接看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>3种jQuery弹出大图效果</title>
<link rel="stylesheet" href="http://7u2iij.com1.z0.glb.clouddn.com/images_style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgbox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#pic1").imgbox(); $("#pic2").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
}); $("#pic3").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});
});
</script>
</head>
<body>
<!-- 代码 BEGIN -->
<div id="content">
<h1>imgBox--图片点击放大示例</h1>
<hr />
<div id="images">
<a id="pic1" title="图片一" href="http://7u2iij.com1.z0.glb.clouddn.com/pic1.jpg"><img alt="" src="http://7u2iij.com1.z0.glb.clouddn.com/pic1.jpg" width="150" height="90" /></a>
<a id="pic2" title="图片二" href="http://7u2iij.com1.z0.glb.clouddn.com/pic2.jpg"/><img alt="" src="http://7u2iij.com1.z0.glb.clouddn.com/pic2.jpg" width="150" height="90" /></a>
<a id="pic3" title="图片三" href="http://7u2iij.com1.z0.glb.clouddn.com/pic3.jpg"><img alt="" src="http://7u2iij.com1.z0.glb.clouddn.com/pic3.jpg" width="150" height="90" /></a>
</div>
<div><a href="" target="_blank" class="download">本地下载</a></div>
</div>
<!-- 代码 END -->
<div style="text-align:center">
<p>文章来源：<a href="http://www.cnblogs.com/iyitong/" target="_blank">cyt静风</a></p>
</div>
</body>
</html>
3种jQuery弹出大图效果的更多相关文章
- jQuery弹出层效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- jquery 弹出框效果
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- JQuery弹出层，实现弹层切换，可显示可隐藏。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- [转]jquery Fancybox丰富的弹出层效果
本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...
- jQuery WIN 7透明弹出层效果
jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- 效果非常好的 Jquery弹出层插件 jQuery Sweet alert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...
- jQuery弹出美女大图片
效果:http://hovertree.com/texiao/jqimg/2/ 效果图: 下载:http://hovertree.com/h/bjaf/jdaqepet.htm HTML代码: < ...
随机推荐
- IE的Trident引擎下实现C++和Javascript相互调用
我们知道实现C++和Javascript通讯有下表5种接口: 引擎 编写语言 API接口 C.C++与JavaScript交互(变量.函数.类) vc2005编译静态库的大小 示例EXE的大小 执行. ...
- 【BZOJ1029】[JSOI2007] 建筑抢修（堆优化贪心）
点此看题面 大致题意: 有N个受到严重损伤的建筑,对于每个建筑,修好它需要\(T1\)秒,且必须在\(T2\)秒之前修完(\(T1\)与\(T2\)不是固定值),问你最多能修好几个建筑. 题解 一看到 ...
- MAC之tar解压与压缩gz打包命令
tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件! ...
- CUDA：Supercomputing for the Masses (用于大量数据的超级计算)-第一节
原文链接 第一节 CUDA 让你可以一边使用熟悉的编程概念,一边开发可在GPU上运行的软件. Rob Farber 是西北太平洋国家实验室(Pacific Northwest National Lab ...
- WinSCP使用与linux命令（小部分命令）
一.下载一个WinSCP WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端.同时支持SCP协议.它的主要功能就是在本地与远程计算机间安全的复制文件..winscp也可以链接其 ...
- npm 常用指令 使用指令删除 node_modules 包
查看 npm 命令 npm help 全局命令参数 -g npm install -g 安装全局 npm uninstall -g 卸载全局 全局node包中 i5ting_toc 这个包可以把md文 ...
- Oracle问题分析采集数据的方法
1.背景: 运维人员或多或少都会遇到分析问题.分析故障的时候,往往在碰到一些棘手的问题事,我们都会往更深层次的专家进行求助.不管是二线专家还是Oracle全球服务工程师(后文称GCS工程师),往往都会 ...
- LeetCode948-令牌放置
问题:令牌放置 你的初始能量为 P,初始分数为 0,只有一包令牌. 令牌的值为 token[i],每个令牌最多只能使用一次,可能的两种使用方法如下: 如果你至少有 token[i] 点能量,可以将令牌 ...
- win10.net 安装出问题0x800F70422
因为安装ooracle数据库的时候需要用到.net但安装的时候出了0x800F70422, 随后就去网上查了下这个错出现的原因,发现是我之前把Windows自带的更新给禁用了 只要把它再开启就行了.
- 调用python-nmap实现扫描局域网存活主机
使用环境:Raspberry 3b+ +netifaces+python-nmap+nmap 调用netifaces自动获取ip地址: def get_gateways(): return netif ...