jQuery Lightbox图片放大预览

简介:jQueryLightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度。效果展示 http

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度。

效果展示 http://hovertree.com/texiao/jqimg/6/

效果图如下:

jQuery Lightbox图片放大预览

源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm

HTML文件代码:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery zoomify图片放大预览代码 - 何问起</title>
<base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/6/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/6/dist/zoomify.min.css">
<link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/6/css/style.css">

</head>
<body>
<div class="container">        
    <div class="examples">    
        <div class="row">
            <div class="example  col-md-12 col-xs-12 ">
                <p><img src="http://hovertree.com/hvtimg/bjafjd/xusm0re6.jpg" class="img-rounded" alt=""></p>
            </div>
        </div>
        <div class="row">
            <div class="example  col-xs-6 col-md-6">
                <p><img src="http://hovertree.com/hvtimg/bjafjd/hs6oi257.jpg" class="img-rounded" alt=""></p>
            </div>
            <div class="example col-xs-6 col-md-6">
                <p><img src="http://hovertree.com/hvtimg/bjafjd/070joeh7.jpg" class="img-rounded" alt=""></p>
            </div>
        </div>
        <div class="row">
            <div class="example col-xs-3 col-md-3">
                <p><img src="http://hovertree.com/hvtimg/bjafjd/81q15f9j.jpg" class="img-rounded" alt=""></p>
            </div>
            <div class="example col-xs-3 col-md-3">
                <p><img src="http://hovertree.com/hvtimg/bjafjc/rgevo2ea.jpg" class="img-rounded" alt=""></p>
            </div>
            <div class="example col-xs-3 col-md-3">
                <p><img src="http://hovertree.com/hvtimg/201511/6j9j6tk5.png" class="img-rounded" alt=""></p>
            </div>
            <div class="example col-xs-3 col-md-3">
                <p><img src="http://hovertree.com/hvtimg/bjafjf/1lf4d3qj.jpg" class="img-rounded" alt=""></p>
            </div>
        </div>
    </div>    
</div>

<script src="http://down.hovertree.com/jquery/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="http://hovertree.com/texiao/jqimg/6/dist/zoomify.min.js"></script>
<script type="text/javascript">
    $('.example img').zoomify();
</script>

<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:FireFox、Chrome、Safari、Opera、Edge、IE11等新版浏览器. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a>
<a href="http://hovertree.com/h/bjaf/yb41c3xl.htm">代码说明</a></p>
</div>
</body>
</html>

转自:http://hovertree.com/h/bjaf/yb41c3xl.htm

 特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120282.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • intellij idea运行配置_idea2017配置jdk

    intellij idea运行配置_idea2017配置jdkIntelliJidea2017.2配置Tomcat8.5前期准备IDEA、JDK、Tomcat什么的先装好,环境配置好,本文中没有这些配置博客图片为主请注意看仔细第一步当然先得建一个web项目1、file-&gt;new-&gt;project-Next-&gt;Finish-项目建好了接下来就是配置了-工具栏点击上图图标或【F4】或项目右键【OpenModuleS…

    2022年8月31日
  • ubuntu18.04录屏软件_linux录屏软件推荐

    ubuntu18.04录屏软件_linux录屏软件推荐1安装1sudoadd-apt-repositoryppa:peek-developers/stablesudoaptupdatesudoaptinstallpeek2.peek使用我想使用peek录制我操作某一软件,做一个教程。发现选不中要录的软件,因为peek始终在最前端,你只能选用peek,咋么办?将peek放置要录的区域,选择录制,出现倒计时在倒计时这几秒内,右键peek顶部,取消Alwayontop在桌面的菜单栏,选择软件,这时,这个软件处于最前端,然

    2022年9月15日
  • 【一键新机】免root/不刷机/拒绝Xposed 实现 Android改机,全新技术分析。「建议收藏」

    【一键新机】免root/不刷机/拒绝Xposed 实现 Android改机,全新技术分析。「建议收藏」此篇文章仅探讨Android底层技术。不提供任何软件和安装包……我们通过一些底层技术对手机中的各种基础信息进行一个修改。主要修改的参数有:Android_Id、IMEI、手机序列号、手机号码、WIFI-MAC、WIFI-Name、安卓系统版本、ROM固件、手机号码、手机型号、手机品牌、CPU型号、手机制造商、GPS定位、通话记录模拟、手机短信模拟……等各类安卓手机系统信息的修改功能…

    2022年6月8日
  • 毕设不会做怎么办_毕设网

    毕设不会做怎么办_毕设网身边很多从事办公室的白领,经常会听他们说:腰椎不行了,有点难受,要不就颈椎也不舒服,这些常见的现象不可忽视,它会对人们后面的生活产生很多负面的影响,所以我们想到能不能有这么一个设备,它会定期提醒人们不要坐太久。其实久坐提醒不是一个新鲜事,市面上也有许许多多关于久坐提醒的工具神器,但是,今天我们HaaS团队就手把手教长期在办公室久坐着的你亲手打造一款属于自己的久坐提醒设备,当你长时间在工位上坐着,它会通过钉钉提醒你,让你一段时间去活动一下筋骨,走动走动,这样让我们上班的同时身体也变得更健康。1、…

    2022年10月1日
  • 浅谈安防监控中视频图像处理技术

    浅谈安防监控中视频图像处理技术2019-08-1521:39:20随着计算机软件、硬件技术的日新月异的发展和普及,人类已经进入一个高速发展的信息化时代,人类大概有80%的信息来自图像,科学研究、技术应用中图像处理技术越来越成为不可缺少的手段。安防行业已经进入一个崭新的时代,高清、智能与大数据和云技术的广泛结合应用,成为时代新的话题。随着而来的是,视频图像处理技术也逐渐成熟起来,只有这样才能切合行业技术发展,为此,对于视频…

    2022年6月28日
  • 2021-08-16 WPF控件专题 WrapPanel 控件详解

    2021-08-16 WPF控件专题 WrapPanel 控件详解1.WrapPanel控件介绍流面板子元素按顺序排列,如果按水平方向:从左到右,超出部分,自动换行到下一行垂直从上到下,下一列排列方向:OrientationItemWidthItemHeight调整面板的尺寸时,内部子元素的布局–自动调整弥补StackPanel的不足StackPanel与WrapPanel结合使用2.具体案例<BorderBorderBrush=”Red”BorderT.

    2022年7月23日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号