基于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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
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
PHP HTML代码串截取代码
2008/12/29 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
JS实现li标签的删除
2019/04/12 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python实现泊松图像融合
2018/07/26 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
AJAX都有哪些有点和缺点
2012/11/03 面试题
UNIX命令速查表
2012/03/10 面试题
会计应届生的自荐信
2013/12/13 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
罚站检讨书
2015/01/29 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
《观察物体》教学反思
2016/02/17 职场文书
《我的长生果》教学反思
2016/02/20 职场文书