jQuery实现点击小图显示大图代码分享
2019/6/29 22:23:33
本文主要是介绍jQuery实现点击小图显示大图代码分享,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了jQuery实现点击小图显示大图效果。分享给大家供大家参考。具体如下:
这是一款基于jQuery实现的点击小图查看大图的代码,适合用于产品展示等环节,便于用户浏览产品细节,是一款非常实用的特效代码。
运行效果图: ----------------------查看效果-----------------------
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery实现点击小图显示大图效果代码如下
<head> <title>jQuery实现点击小图显示大图效果</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="js/pngobject.js"></script> <link rel="stylesheet" href="style/style.css" type="text/css" /> <link rel="stylesheet" href="style/jquery.fancybox-1.3.1.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { /* * Examples - images */ $("a#example1").fancybox({ 'titleShow' : false }); $("a#example2").fancybox({ 'titleShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); $("a#example3").fancybox({ 'titleShow' : false, 'transitionIn' : 'none', 'transitionOut' : 'none' }); $("a#example4").fancybox(); $("a#example5").fancybox({ 'titlePosition' : 'inside' }); $("a#example6").fancybox({ 'titlePosition' : 'over' }); $("a[rel=example_group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); /* * Examples - various */ $("#various1").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' }); $("#various2").fancybox(); $("#various3").fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); $("#various4").fancybox({ 'padding' : 0, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); </script> </head> <body> <div id="content"> <h4>jQuery 实现点击小图显示大图</h4> <p> <a rel="example_group" href="example/11.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="example/1.jpg" /></a> <a rel="example_group" href="example/22.jpg" title=""><img alt="" src="example/2.jpg" /></a> <a rel="example_group" href="example/44.jpg" title=""><img alt="" src="example/4.jpg" /></a> </p> <p> <a rel="example_group" href="example/33.jpg" title=""><img alt="" src="example/3.jpg" /></a> <a rel="example_group" href="example/8_b.jpg" title=""><img alt="" src="example/8_s.jpg" /></a> <a rel="example_group" href="example/9_b.jpg" title=""><img alt="" src="example/9_s.jpg" /></a> </p> </div> <div><p> </p></div> </body> </html>
以上就是为大家分享的jQuery实现点击小图显示大图效果代码,希望大家可以喜欢。
这篇关于jQuery实现点击小图显示大图代码分享的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习