全部博文（2065）
分类： 系统运维
2009-12-19 15:48:43
JQuery图片相关插件专题整理
［By
hkebao@126.com］
相关的插件包括：
1、
相册效果功能与FLV效果一样的。可以播放
2、
图片放大效果即鼠标一移上去就放大图片出来
3、
其他的图片相册相关的插件
希望得到的特效：
用户看到图片 ---------- > 点击图片 放大效果
具体的实施代码：
必需的文件一个是JS、另一个是CSS文件
具体的页面代码是：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<script type="text/javascript" src="jquery.js">script>
head>
<body>
<a href="single.jpg" title="加载这个图片的相关说明性文字" class="thickbox">
<img src="single.jpg" alt="图片说明" width="10%" height="10%"/>
a>
body>
html>
此插件的整理版本存放在：F:\工具整理\常用代码\JQuery常用代码\相册图像相关\ThickBox
上面的例子一次只显示一张图片，一般的应用会一行加载多幅图片。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<script type="text/javascript" src="jquery.js">script>
<script type="text/javascript" src="thickbox.js">script>
<link rel="stylesheet" href="ThickBox.css" type="text/css" media="screen" />
head>
<body>
<a href="single.jpg" title="加载这个图片的相关说明性文字" class="thickbox">
<img src="single.jpg" alt="图片说明" width="10%" height="10%"/>
a>
<a href="single.jpg" title="加载这个图片的相关说明性文字" class="thickbox">
<img src="single.jpg" alt="图片说明" width="10%" height="10%"/>
a>
<a href="single.jpg" title="加载这个图片的相关说明性文字" class="thickbox">
<img src="single.jpg" alt="图片说明" width="10%" height="10%"/>
a>
<a href="single.jpg" title="加载这个图片的相关说明性文字" class="thickbox">
<img src="single.jpg" alt="图片说明" width="10%" height="10%"/>
a>
body>
二、 slideViewer
插件
实现的特效：
对于一些网站。如果要展现多幅图片的效果的时候，能够输出图片相册的特效非常不错。
截图如：
代码准备：
必备的代码是：
<script type="text/javascript" src="jquery.js">script>
<script src="jquery.easing.1.2.js" type="text/javascript">script>
<script src="slideViewer.js" type="text/javascript">script>
<link rel="stylesheet" href="basice.css" type="text/css" media="screen" />
HTML PUBLIC
"-//W
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<script type="text/javascript" src="jquery.js">script>
<script src="jquery.easing.1.2.js" type="text/javascript">script>
<script src="slideViewer.js" type="text/javascript">script>
<link rel="stylesheet" href="basice.css" type="text/css" media="screen" />
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygalone").slideView({
easeFunc: "easeInOutBack",
easeTime: 2200
});
});
script>
head>
<body>
<div id="mygalone" class="svw">
<ul>
<li><img alt="abc 测试 thysu ooip jkifbtg fff" src="01.jpg" width=150 height=100 />li>
<li><img alt="abc 测试 thysu ooip jkifbtg fff" src="single.jpg" width=150 0height=100/>li>
<li><img alt="abc 测试 thysu ooip jkifbtg fff" src="single.jpg" width=150 height=100/>li>
<li><img alt="abc 测试g thysu ooip jkifbtg fff" src="01.jpg" width=150 height=100/>li>
<li><img alt="测试 defrg thysu
ooip jkifbtg fff" src="01.jpg" width=150 height=100/>li>
ul>
div>
body>
html>
大家要注意一点：图片的大小如果不一致的话那显示出来的时候就会显示不正常。所以最好是给每幅图片指定具体的图片大小进来。这样看起来图片不会变形了！
代码全部存放在：F:\工具整理\常用代码\JQuery常用代码\相册图像相关\slidviewer
