当前位置:编程学习 > JS >>

jquery图片预览放大效果

本文章提供一款jquery图片预览放大效果,就是当你指向小图片时,会自动放大图片显示为预览效果哦,如果你正在找jquery图片放大效果可以进来免费实例本款实例哦,并且提供源码下载与在线预览效果。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.zhutiai.com/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery图片预览放大效果</title>
<meta name="description" content="easiest jquery tooltip ever">
<script src="js/jquery.js" type="text/网页特效"></script>
<script src="js/163css教程.js" type="text/javascript"></script>
</meta>
<style type="text/css">
body { margin:0; padding:40px; background:#fff; font:80% arial, helvetica, sans-serif; color:#555; line-height:180%; }
h1 { padding-left:25px; font-size:16px; font-weight:normal; color:#555; }
a { text-decoration:none; color:#f30; }
p { clear:both; margin:0; padding:.5em 0; }
pre { display:block; font:100% "courier new", courier, monospace; padding:10px; border:1px solid #bae2f0; background:#e3f4f9; margin:.5em 0; overflow:auto; width:800px; }
img { border:none; }
ul, li { margin:0; padding:0; }
li { list-style:none; float:left; display:inline; margin-right:10px; }
.box{ width:580px; margin:20px auto;}
#preview { position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }
</style>
</head>
<body>
<div class="box">
 <h1>网页js特效,css群:104306808,网站重构设计,css大师</h1>
 <ul>
   <li><a href="images/1.jpg" class="preview" title="js图片带按钮左右滚动,文字可编辑
"><img src="images/1s.jpg" alt="www.zhaoxi.net" /></a></li>
   <li><a href="images/2.jpg" class="preview" title="弹出窗口在注册页面中的巧妙应用
"><img src="images/2s.jpg" alt="www.zhaoxi.net" /></a></li>
   <li><a href="images/3.jpg" class="preview" title="点击标题显示内容--jquery手风琴应用
"><img src="images/3s.jpg" alt="www.zhaoxi.net" /></a></li>
   <li><a href="images/4.jpg" class="preview" title="一个很漂亮的三级下拉菜单
"><img src="images/4s.jpg" alt="www.zhaoxi.net" /></a></li>
 </ul>
</div>
</body>
</html>

源码下载
http://down.zhaoxi.net/down/code/jquery/2010/1019/21294.html

效果预览
http://g.226511.cn/javascript/code/20101015/jq

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,