基于jQuery插件实现点击小图显示大图效果


Posted in Javascript onMay 11, 2016

本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下

显示以下效果

基于jQuery插件实现点击小图显示大图效果

点击任意一张图片会显示大图

基于jQuery插件实现点击小图显示大图效果

1、前台界面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="练习.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
   <style type="text/css">
   #mydiv ul{ list-style-type:none;}
   #mydiv ul li{ display:inline;}
   #mydiv{ width:500px; border:solid 1px #444; background-color:#333;} 
   </style>
   <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />
   <script src="Jquery1.7.js" type="text/javascript"></script>
   <script src="js/NFLightBox.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(function () {
     //var settings = { containerResizeSpeed: 3000 };
     $('#mydiv ul a').lightBox({ containerResizeSpeed: 1000 });
    })
  
   </script>
</head>
<body>
<form id="form1" runat="server">
 <div id="mydiv" runat="server">
 
 </div>
 </form>

</body>
</html>

2、后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Text;

namespace 练习
{
 public partial class WebForm1 : System.Web.UI.Page
 {
  protected void Page_Load(object sender, EventArgs e)
  {

   if (!IsPostBack)
   {
    LoadData();
   }
  }
 private void LoadData() 
  {
   string constr = "data source=LOVE-PC\\SQLEXPRESSPC;initial catalog=BoKe;user id=sa;password=admin";
   using (SqlConnection conn = new SqlConnection(constr))
   {
    using (SqlCommand cmd =conn.CreateCommand())
    {
     conn.Open();
     cmd.CommandText = "select BigImgUrl,SmallImgUrl from T_Photo";
     SqlDataAdapter adapter = new SqlDataAdapter(cmd);
     DataTable dt = new DataTable();
     adapter.Fill(dt);
     StringBuilder sb = new StringBuilder();
     sb.Append("<ul>");
     for (int i = 0; i < dt.Rows.Count; i++)
     {
      sb.Append("<a href=" + dt.Rows[i]["BigImgUrl"] + ">");//添图片路径
      sb.Append("<li>");
      sb.Append("<img src=" + dt.Rows[i]["SmallImgUrl"] + ">");//添图片路径
      sb.Append("</li>");
      sb.Append("</a>");


     }
     sb.Append("</ul>");
      mydiv.InnerHtml = sb.ToString();
    }
   }
   
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 #Javascript
使用JavaScript实现ajax的实例代码
May 11 #Javascript
jQuery的框架介绍
May 11 #Javascript
jQuery链式调用与show知识浅析
May 11 #Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 #Javascript
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP教程 预定义变量
2009/10/23 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python 对象中的数据类型
2017/05/13 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Python 画出来六维图
2019/07/26 Python
PyTorch预训练的实现
2019/09/18 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
北京奥运会口号
2014/06/21 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
小学国庆节活动总结
2015/03/23 职场文书
小学大队委竞选口号
2015/12/25 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL