美女相册案例

<!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. Python Flask 开发学习笔记

    Flask学习 安装pipenv虚拟环境 pip Install pipenv 运行pipenv pipenv --version 进入虚拟容器 pipenv install 安装flask pipe ...

  2. 珠峰-6-node

    1. js主线程是单线程的. 2. path.resolve 传('/')解析出一个绝对路径.

  3. clr via c# 程序集加载和反射集(一)

    1,程序集加载---弱的程序集可以加载强签名的程序集,但是不可相反.否则引用会报错!(但是,反射是没问题的) //获取当前类的Assembly Assembly.GetEntryAssembly() ...

  4. Kotlin Tutorials系列文章

    Kotlin Tutorials系列文章 想写一个有实用价值的Kotlin笔记, 让一线开发一看就懂, 看完就能上手. 当然官方文档更有参考价值了. 这个系列相对于官方文档的大而全来说, 最主要优势是 ...

  5. MongoDB集群负载不均衡问题定位及解决

    1.问题描述 这是一套运行在腾讯云上的MongoDB 3.6版本集群,共5个分片,每片规格是6核16GB. 在压测的过程中,发现第3个分片的CPU使用率长时间高达96%,其它4个分片的CPU使用率都没 ...

  6. everspin最新1Gb容量扩大MRAM吸引力

    everspin提供了8/16-bit的DDR4-1333MT/s(667MHz)接口,但与较旧的基于DDR3的MRAM组件一样,时序上的差异使得其难以成为DRAM(动态随机存取器)的直接替代品.   ...

  7. codeforces 1301C Ayoub's function

    题目链接:http://codeforces.com/problemset/problem/1301/C 思路: 纯想想了一次,发现one_cnt >= zero_cnt的时候很简单,就是(n) ...

  8. github无法访问的解决实践

    无废话版: ----------------------------- 1.复制下面内容,添加到hosts文件里(C:\Windows\System32\drivers\etc)不能修改的话,则把文件 ...

  9. 你没有见过的【高恪】船新版本(SX3000 NAT1 X86魔改)

    最近魔改了高恪SX3000 X86,做了如下更改: 开启了SSH 集成了插件(酸酸乳.V2RXY.SMB等等) 开启了NAT1 DIY了主题 精简了官方内置的无用应用和模块 截图(建议右击图片,在新标 ...

  10. python基础入门之一 —— 变量与运算符

    1.标识符 由数字,字母,下划线组成 不能由数字开头 不能使用内置关键字 严格区分大小 2.数据类型 数值:int (整型) float(浮点型) 布尔型:True(真) False(假) str ( ...