<!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. Laravel5.1学习笔记16 数据库2 查询构造器（这个不用看，不如用EloquentORM）

    Introduction Retrieving Results Aggregates Selects Joins Unions Where Clauses Advanced Where Clauses ...

  2. 第二个Activity返回数据

    背景内容:FirstActivity先跳转到TwoActivity,再由TwoActivity返回,并还返回数据. 一般情况下Activity间跳转只需要调用 startActivity(Intent ...

  3. html5——css选择器

    复习 div>p: 子代 div+p:div后面相邻的第一个p div~p: div后面所有的兄弟p 属性选择器 标志:[]:区别于id选择器:#,区别于类名选择器:. 特殊符号:^:开头    ...

  4. graphite 绘图工具

    graphite 绘图工具

  5. What is the difference between Gradle Build and Gradle Sync?

    Gradle Build helps you to compile your Android app into an APK while Gradle Sync will sync up all yo ...

  6. Escaping Closures 两点：本质是生命周期标示符

    1.block需要(拷贝)保存: 2.block引用的环境变量需要处理. 相当于oc中的copy block. Escaping Closures A closure is said to escap ...

  7. NBXplorer的配置

    首先,必须安装bitcoin core bitcoin core启动时,会提示你定义数据存放目录,在数据存放目录下,找到bitcoin.conf文件,并填写内容: server=1rpcuser=rp ...

  8. Python os模块和time模块 day4

    一.os模块 print(os.listdir(r'/Users/smh/Desktop/整理'))#os.listdir() 列出某个目录下面的文件夹/文件 print(os.path.isfile ...

  9. HDU 3152 Obstacle Course（优先队列，广搜）

    题目 用优先队列优化普通的广搜就可以过了. #include<stdio.h> #include<string.h> #include<algorithm> usi ...

  10. 面试：A

    分析 System.Collections.Generic.List<T> 的 Remove<T> 方法和 Clear 方法的实现细节(不允许使用“移除”“清除”这种概念模糊的 ...