<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>为图片添加边框</title>

    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        //方法1 使用css()方法

//        $(function(){

//            $("img").eq(0).click(function(){

//                $(this).css("border","1px solid red");

//            })

//        })

        //方法2 使用addClass（）方法

        $(function(){

            $("img").click(function(){

                $(this).addClass('border');

            })

        })

    </script>

    <style type="text/css">

        .border{border:1px solid #ccc;}

    </style>

</head>

<body>

<img src="./images/pic.gif" />

</body>

</html>

点击图片加边框.html

jQuery - 点击图片加边框的更多相关文章

  1. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  2. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

  3. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  4. C#实现给图片加边框的方法

    Bitmap bit= new Bitmap(@"" + Path);//给图片加边框 //Bitmap bit = new Bitmap(Screen.AllScreens[0] ...

  5. PHP 给图片加边框

    /** * 给图片加边框 by liangjian 2014-06-19 * @param $ImgUrl 图片地址 * @param $SavePath 新图片保存路径 * @param $px 边 ...

  6. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  7. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

  8. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  9. Android 给图片 加边框

    图片处理时,有时需要为图片加一些边框,下面介绍一种为图片添加简单边框的方法. 基本思路是:将边框图片裁剪成八张小图片(图片大小最好一致,不然后面处理会很麻烦),分别对应左上角,左边,左下角,下边,右下 ...

随机推荐

  1. Maven 学习（1）

    Maven是什么,以及为什么要使用Maven?Maven这个词可以翻译为“知识的积累”,也可以翻译为“专 家”或“内行”.(构建 = 编写源代码+编译源代码+单元测试+生成文档+打包War+部署)Ma ...

  2. Serializable和Parcelable的简单介绍

    Serializable和Pacelable接口可以完成对象的序列化过程,当我们需要通过Intent和Binder传输数据时就需要使用Parcelable或者Serializable. Seriali ...

  3. ElasticSearch-5.21安装

    环境 操作系统:Centos 6.5 X64 IP地址:192.168.56.100 JDK 环境: # java -version java version "1.8.0_121" ...

  4. js获取某年某月一共多少天

    const getDaysInMonth = (year, month) => { let date = new Date(year, month, 1); return new Date(da ...

  5. Windows Server 2008无法远程连接

    Server 2008 R2依次配置好之后,重启发现总是远程桌面时而连接不上.具体现象如下: 偶尔可以通过桌面远程连接连接到Server.以为是防火墙的问题,各种设置——甚至关闭,依然无法连接.反复重 ...

  6. https Full Handshake

    1)加密套件交互: 2)密码交换: 3)身份认证: Full Handshake Initially, client and server "agree upon" null en ...

  7. DateTimePicker 控件置空

    dtOrderDateFrom.Format = DateTimePickerFormat.Custom; dtOrderDateFrom.CustomFormat = " "; ...

  8. 浅谈animation里的forwards

    forwards可译为向前走, animation-fill-mode(动画填充模式),定义动画播放时间之外的状态 顾名思义,就是在动画播放完了之后给它一个状态 animation-fill-mode ...

  9. 【css】最近使用的两种图标字体库

    ## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...

  10. rsync全网备份

    rsync备份企业方案 企业有Linux服务器又有windows服务器,备份用rsync(服务端),Linux(客户端),Windows(客户端,cwrsync,旧版本有免费版)打包压缩数据往服务器上 ...