美女相册案例

<!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. 【STM32H7教程】第61章 STM32H7的MDMA基础知识和HAL库API

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第61章       STM32H7的MDMA基础知识和HAL ...

  2. python3-cookbook笔记：第九章 元编程

    python3-cookbook中每个小节以问题.解决方案和讨论三个部分探讨了Python3在某类问题中的最优解决方式,或者说是探讨Python3本身的数据结构.函数.类等特性在某类问题上如何更好地使 ...

  3. C++中的public、protected和private

    访问权限控制 一个类的public的成员变量.成员函数,可以通过类的实例变量进行访问. 一个类的protected的成员变量.成员函数,无法通过类的实例变量进行访问,但是可以通过类的友元函数.友元类进 ...

  4. JavaScript将数组转换为链表

    JS中将数组转换为链表 /** * 将数组转换为链表 * @param array arr 需要转换的数组 * @param int type 转换的类型,0为单链表,1为循环链表 * @return ...

  5. 寒假学习进度一(安卓配置环境的搭建和hello world)

    今天学习内容:观看了哔哩哔哩上的安卓教学视频,简单了解下了安卓的基本知识 具体内容: 一.配置安卓开发环境(安装Android studio,配置JDK) Android studio是个集成环境,不 ...

  6. DolphinScheduler1.2.1源码分析

    DolphinScheduler在2020年2月24日发布了新版本1.2.1,从版本号就可以看出,这是一个小版本.主要涉及BUG修复.功能增强.新特性三个方面,我们会根据其发布内容,做简要的源码分析. ...

  7. MySQL数据库root密码忘记丢失重置方法

    对于DBA来说,丢失超管用户root的密码是致命的, 可以通过添加--ship-grant-tables参数来跳过权限表. 1.忘记root密码,进不去数据库: 这个时候需要强制停库,先查看MySQL ...

  8. javascript中如何使用js脚本模拟"request"获取url后参数值呢？

    转自:猫猫小屋--js获取url后参数信息 摘要: 下文讲述javascript中使用js代码获取url地址后面的参数值的方法分享,如下所示: 实现思路: 使用正则表达式对参数值进行匹配,获取参数后的 ...

  9. 洛谷P1063能量项链(区间dp)

    题目描述: 给定一串序列x[],其中的每一个Xi看作看作一颗珠子,每个珠子包含两个参数,head和tail,前一颗的tail值是后一个的head值,珠子呈现环形(是一条项链),所以最后一颗的tail是 ...

  10. 通过CSS3属性值的变化实现动画效果+触发这些动画产生交互

    css3过渡 transition 兼容性:IE10+ transition: none | all | property 默认为none all 表示所有属性过渡 property 指定属性值,如c ...