美女相册案例

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    body {

      font-family: "Helvetica", "Arial", serif;

      color: #333;

      background-color: #ccc;

      margin: 1em 10%;

    }

    h1 {

      color: #333;

      background-color: transparent;

    }

    a {

      color: #c60;

      background-color: transparent;

      font-weight: bold;

      text-decoration: none;

    }

    ul {

      padding: 0;

    }

    li {

      float: left;

      padding: 1em;

      list-style: none;

    }

    #imagegallery {

      list-style: none;

    }

    #imagegallery li {

      margin: 0px 20px 20px 0px;

      padding: 0px;

      display: inline;

    }

    #imagegallery li a img {

      border: 0;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    // $(function () {

    //   //1. 给所有的a注册点击事件

    $(function () {

      //给所有a注册点击事件

      $("#imagegallery a").click(function () {

        //获取当前a的href属性 （a是个大图，里面包了小图）

        var href = $(this).attr("href");

        //点击a的时候，改变下面大框的图片的属性src ，值就用当前a的href

        $("#image").attr("src", href);

        //点击a的时候，改变文字框的title属性，值就用当前a的title

        var title = $(this).attr("title");

        $("#des").text(title);

        return false;

      })

    })

  </script>

</head>

<body>

  <h2>

    美女画廊

  </h2>

  <ul id="imagegallery">

    <li><a href="images/1.jpg" title="美女A">

        <img src="data:images/1-small.jpg" width="100" alt="美女1" />

      </a></li>

    <li><a href="images/2.jpg" title="美女B">

        <img src="data:images/2-small.jpg" width="100" alt="美女2" />

      </a></li>

    <li><a href="images/3.jpg" title="美女C">

        <img src="data:images/3-small.jpg" width="100" alt="美女3" />

      </a></li>

    <li><a href="images/4.jpg" title="美女D">

        <img src="data:images/4-small.jpg" width="100" alt="美女4" />

      </a></li>

  </ul>

  <div style="clear:both"></div>

  <img id="image" src="data:images/placeholder.png" alt="" width="450px" />

  <p id="des">选择一个图片</p>

</body>

</html>

jQuery---美女相册案例的更多相关文章

  1. jQuery美女幻灯相册轮播源代码

    体验效果:http://hovertree.com/texiao/jquery/ 本幻灯片包含小图列表和大图轮播,包含图片标题和详细介绍,详细介绍字数可以很多,每张图片包含链接,可以实现跳转 HTML ...

  2. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  3. ZOOM - 简单易用的 jQuery 照片相册插件

    jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...

  4. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  5. 基于jquery的相册预览gallery

    众多有图片的产品,都要加个图片预览功能.然后市面上就出现了各种各样的相册,下面也提供一个基于jquery的相册. 源码:https://github.com/lilyH/gallery 版本: v0. ...

  6. "美女相册"的 js 实现代码

    划重点拉!  先来解释一下子标题 这个所谓的美女相册呢  并不是和你们想的一样龌龊 当然了 好像看起来也很龌龊 但是很多的版面都能用到这个功能的 然后在此处  我要为我的my$函数来进行一个诠释 就是 ...

  7. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  8. JQuery 事件及案例

    JQuery事件与JavaScript事件相似,只是把其中的on去掉 1.click,dblclick事件 案例1:点击缩略图换背景 <html xmlns="http://www.w ...

  9. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

随机推荐

  1. Android Gradle报错 (Error:No such property: GradleVersion for class: JetGradlePlugin) 的原因与解决

    Error:No such property: GradleVersion for class: JetGradlePlugin 错误原因:IDE 版本(GradlePlugin)和 Gradle 版 ...

  2. Android中使用AlertDialog实现几种不同的对话框

    场景 app中常见的对话框. 简单的带确定取消按钮的对话框 带列表的对话框 带单项选择的对话框 带多项选择的对话框 注: 博客: https://blog.csdn.net/badao_liumang ...

  3. kubernetes监控

    总体设计思想 总体设计架构图Kubernetes monitoring architecture 设计介绍 监控分成两个部分 核心指标流程 包括的组件有 kubelet.resource estima ...

  4. Windows10访问Ubuntu子系统（WSL）的桌面环境

    原文地址:https://blog.csdn.net/xmh19936688/article/details/90212960 Windows10访问Ubuntu子系统(WSL)的桌面环境文章目录Wi ...

  5. Lucene之索引库的维护：添加，删除，修改

    索引添加 Field域属性分类 添加文档的时候,我们文档当中包含多个域,那么域的类型是我们自定义的,上个案例使用的TextField域,那么这个域他会自动分词,然后存储 我们要根据数据类型和数据的用途 ...

  6. Ubuntu18.04安装mysql并配置远程访问

    1.ssh连接到Ubuntu服务器 默认root用户登陆,如果运行以下命令没有权限请在命令开头加sudo 2.安装mysql apt install mysql-server 3.配置mysql my ...

  7. java自学：从零基础到入门系列--java环境变量的配置JDK的下载安装图解

    一.首先去官网下载 Java 语言的软件开发工具包–JDK,下载JDK8即可,下载地址为:https://www.oracle.com/technetwork/java/javase/download ...

  8. JS数据类型和堆栈+变量比较和值的复制+参数传递和类型检测

    变量命名 变量名:字母 数字 下划线 美元符$ jquery:  $     $.each()   $ === jQuery underscore( js的一个函数库)  :   _     _.ea ...

  9. 回炉重造之重读Windows核心编程-004-进程

    进程是一个正在运行的程序的实例,由内核对象和地址空间组成.进程是不活泼的,执行地址空间中代码的是在它的环境中运行线程.每个线程都需要自己的一组CPU寄存器和堆栈. 为了让所有线程都能运行,操作系统就要 ...

  10. Bilibili手机端下载的Download文件批量转换为MP4软件【Bilibili_DownVideoToMp4】原创发布

    Bilibili手机端下载的Download文件批量转换为MP4软件[Bilibili_DownVideoToMp4]原创发布 起因 Bilibili手机端的视频下载下来只能在手机上看,手机屏幕太小看 ...