jquery图片放大镜和遮罩层效果

简介: 图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件。 1、引入样式表 1 /*整体样式*/ 2 3 /*图片遮罩层样式*/ 4 2、引入js插件 1 2 3 4 5 6 7 3、具体页面内容 1 2  ...

图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件。

1、引入样式表

1 /*整体样式*/
2 <link rel="stylesheet" href="styles/main1.css" type="text/css" />
3 /*图片遮罩层样式*/
4 <link rel="stylesheet" href="styles/thickbox.css" type="text/css" />

2、引入js插件

1 <!-- jquery文件-->
2 <script src="../scripts/jquery.js" type="text/javascript"></script>
3 <!-- 图片放大镜 -->
4 <script src="scripts/jquery.jqzoom.js" type="text/javascript"></script>
5 <script src="scripts/use_jqzoom.js" type="text/javascript"></script>
6 <!-- 遮罩图片 -->
7 <script src="scripts/jquery.thickbox.js" type="text/javascript"></script>

3、具体页面内容

 1 <div class="jnProitem">
 2   <div class="jqzoomWrap">
 3     <a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel='gal1' title="衬衣" >
 4       <img src="images/pro_img/blue_one_small.jpg" title="纹衬衣" alt="衬衣"/>
 5        </a>
 6     </div>
 7     <span>
 8         <a title="介绍文字" href="images/pro_img/blue_one_big.jpg" class="thickbox">
 9            <img src="images/look.gif" alt="点击看大图" />
10         </a>
11     </span>
12 </div>

4、效果图为:

 

当神已无能为力,那便是魔渡众生
liurio
+关注
目录
打赏
0
0
0
0
3
分享
相关文章
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
5月前
|
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
164 67
|
2月前
|
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
78 16
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
35 2
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
132 1
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
jQuery lazyload.js 懒加载可视范围图片
jQuery lazyload.js 懒加载可视范围图片
91 0
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?