JQuery - 点击图片显示大图

效果：

目录结构：

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片显示</title>

    <script src="JavaScript/Quote/jquery-1.8.3.min.js"></script>
    <link href="Component/Lightbox/css/lightbox.css" rel="stylesheet" />
    <script src="Component/Lightbox/js/lightbox-2.6.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <div>

            <a href="Images/demopage/image-3.jpg" data-lightbox="example-set" title="">
                <img src="Images/demopage/thumb-1.jpg" />
            </a>

            <a href="Images/demopage/image-4.jpg" data-lightbox="example-set" title="">
                <img src="Images/demopage/thumb-4.jpg" />
            </a>

            <a href="Images/demopage/image-5.jpg" data-lightbox="example-set" title="">
                <img src="Images/demopage/thumb-5.jpg" />
            </a>

            <a href="Images/demopage/image-3.jpg" data-lightbox="example-set" title="">
                <img src="Images/demopage/thumb-3.jpg" alt="img" />
            </a>

            <a href="Images/demopage/image-4.jpg" data-lightbox="example-set" title="">
                <img src="Images/demopage/thumb-4.jpg" alt="img" />
            </a>

            <a href="Images/demopage/image-5.jpg" data-lightbox="example-set" title="">
                <img src="Images/demopage/thumb-5.jpg" alt="img" />
            </a>
        </div>
    </form>
</body>
</html>

时间： 2024-08-05 15:20:58

JQuery - 点击图片显示大图的相关文章

每天一个JavaScript实例-点击图片显示大图添加鼠标操作

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图添加鼠标操作</title> <style> img{padding:5px;width:100px;height:aut

每天一个JavaScript实例-点击图片显示大图

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图</title> <style> img{padding:5px;width:100px;height:auto;} #o

移动端点击图片查看大图

一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">

一天JavaScript示例-点击图片显示大图片添加鼠标

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图加入鼠标操作</title> <style> img{padding:5px;width:100px;height:aut

JavaScript网站设计实践（五）编写photos.html页面，实现点击缩略图显示大图的效果

原文:JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面中使用ul列表显示出所有的缩略图,然后使用JavaScript,for循环检查出当前点击的是哪一张图片,最后把这张图片给显示出来. 用到三个函数:显示图片函数.创建占位符预装图片.点击显示图片

JavaScript和CSS实现详情图片显示大图特效

<!doctype html> <html> <head> <title>JavaScript和CSS实现详情图片显示大图特效</title> <meta http-equiv="content/text" charset="utf-8"> <style type="text/css"> BODY { FONT-SIZE: 14px; LINE-HEIGHT: 1

Jquery 点击图片在弹出层显示大图

http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"></scri

jQuery点击图片弹出大图遮罩层

使用jQuery插件HoverTreeShow弹出遮罩层显示大图效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co

jQuery点击图片放大显示原图效果

HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 //内容页图片点击放大效果 var imgBoxMod=$(".ctnlist .text i