美女相册案例

<!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 数据分析（7）：Pandas （六）数据导入

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

  2. Blazui 常见问题：我更新了数据，为什么界面没刷新？

    首发于:http://www.blazor.group:8000/topic/reply?tpid=9 开门见山,不介绍,不废话 建议食用本文前先食用 https://www.cnblogs.com/ ...

  3. 戏说前端之CSS编码规范

    前言 项目启动时 css 应该注意哪些问题 文件名规范 文件名建议用小写字母加中横线的方式.为什么呢?因为这样可读性比较强,看起来比较清爽,像链接也是用这样的方式,例如 // 地址: github的地 ...

  4. openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)

    内容概览 1.openlayers6结合geoserver利用WFS服务实现图层新增功能2.源代码demo下载 效果图如下: 本篇主要是openlayers6通过调用geoserver发布的地图服务W ...

  5. springCloud进阶(微服务架构&Eureka)

    springCloud进阶(微服务架构&Eureka) 1. 微服务集群 1.1 为什么要集群 为了提供并发量,有时同一个服务提供者可以部署多个(商品服务).这个客户端在调用时要根据一定的负责 ...

  6. Kong 系列【六】添加插件---ip-restriction之黑白名单

    写在前边 本地postMan请求http://192.168.130.131:8000/test-route,可以正常访问,本地IP:192.168.130.1同样在虚拟机环境192.168.130. ...

  7. watch实现监听Vuex状态监听(利用computed)

    Vuex 通过 store 选项,提供了一种机制将状态从根组件"注入"到每一个子组件中(需调用 Vue.use(Vuex)):通过在根实例中注册 store 选项,该 store ...

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

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

  9. sql查询 ——排序

    -- 排序 -- order by 排序 默认为升序 -- asc 升序 -- desc 降序 -- 查询身高 分别用升序和降序 select *from student order by high ...

  10. 使用expect实现自动交互，shell命令行自动输入

    背景 有需求,在允许命令或者脚本跳出交互行,需要进行内容输入,但需要人手动输入,不是很方便,此时可以通过expect来实现自动互动交互. expect是一个自动交互功能的工具,可以满足代替我们实际工作 ...