美女相册案例

<!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. 【转】netty-transport版本冲突

    Springboot整合Elasticsearch报错 今天使用SpringBoot整合Elasticsearch时候,相关的配置完成后,启动项目就报错了. nested exception is j ...

  2. bs 网站获取电子秤重量方案

    1:开发一个winform小程序专门用来读取电子秤数据 电子秤链接串口开发需要注意的是 端口名称跟波特率,校验位 (本样例设置的是7)一定要对,不然取出来的是错的, 还有串口取出来数据是反的,需要转过 ...

  3. MySQL服务器的运维与优化

    MySQL运维 安装数据库 配置本地yum源,将gpmall-repo文件上传至/opt目录 创建yum.repo文件 安装mariadb服务 # yum install -y mariadb mar ...

  4. 【WPF学习】第十八章 多点触控输入

    多点触控(multi-touch)是通过触摸屏幕与应用程序进行交互的一种方式.多点触控输入和更传统的基于笔(pen-based)的输入的区别是多点触控识别手势(gesture)——用户可移动多根手指以 ...

  5. JavaScript对象模型概念

    1.对象的概念 JavaScript只有函数对象才有类的概念,因此创建一个对象,必须使用函数对象.(ES6中可以直接声明一个class,实质上也是一个函数对象). 函数对象的内部有[[Construc ...

  6. Java学习之String、StringBuffer、StringBuilder

    String 我们知道字符串的分配和其他对象分配一样,是需要消耗高昂的时间和空间的,而且字符串我们使用的非常多.JVM为了提高性能和减少内存的开销,在实例化字符串的时候进行了一些优化:使用字符串常量池 ...

  7. c#中用office组件读取excel时提示异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT)

    在excel2007,找到“excel选项”,点开后点击“加载项”,最下面有个管理加载项的下拉菜单,选“COM加载项”,点“转到”,这时会弹出一个框,把里面pdf软件的加载项前面的勾去掉,点确定就ok ...

  8. 38.Python自定义计算时间过滤器

    在写自定义的过滤器时,因为django.template.Library.filter()本身可以作为一个装饰器,所以可以使用: register = django.template.Library( ...

  9. Enityt模型特性

    数据验证相关的数据注解: 特性 解释 Remote 使用 jQuery 验证插件远程验证程序的特性 FileExtension 验证文件扩展名 Compare 比较两个属性的值 RegularExpr ...

  10. Docker实战部署JavaWeb项目-基于SpringBoot

    最近在滴滴云上看到服务器很便宜,1核2G,1年只需要68块钱.下面是我基于Docker部署Javaweb服务的过程.目前我见过的最便宜的服务器,阿里云打折的时候都没有这么便宜啊,果断入手.有需要的话可 ...