<html>

 <style>

 #p {

      background: url("http://soso5.gtimg.cn/sosopic_j/0/4364167033329994952/0") repeat scroll 0 0 rgba(0, 0, 0, 0);

     width:650px;

     height:650px;

     position:relative;

     overflow:hidden;

 }

 #m {

     width:150px;

     height:150px;

     position:absolute;

     left:0px;

     top:0px;

     border: solid rgba(220, 220,220, .5);

     border-width:300px 650px 650px 300px;

     background-clip: padding-box;

     filter:alpha(opacity=50);

 }

 </style>

 <!--[if lte IE 7]>

 <style>

 #m {

     width:650px;

     height:650px;

     border-width:300px 200px 200px 300px;

 }

 </style

 <![endif]-->

 <body>

 <div id=p>

     <div id=m></div>

 </div>

 <script>

 var dm = document.getElementById('m')

 var size = {}

 size.width = size.height = 150

 size.Pw = size.Ph = 650

 var border = {}

 border.left = border.top = 300

 var ie = dm.currentStyle && (parseInt (dm.currentStyle.width) > size.width)

 document.getElementById('p').onmousedown =function(ev){

     ev = ev || window.event

     var x = ev.clientX

         ,y= ev.clientY

     document.body.onmousemove = function(ev){

         ev = ev || window.event

         var _x = ev.clientX

             ,_y= ev.clientY

         var mx = _x - x

             ,my = _y -y

         x = _x , y = _y

         border.left += mx

         border.top += my

         dm.style.borderLeftWidth = border.left + 'px'

         dm.style.borderTopWidth = border.top + 'px'

         if (ie){

             dm.style.borderRightWidth = size.Pw - size.width - border.left + 'px'

             dm.style.borderBottomWidth = size.Ph - size.height - border.top + 'px'

         }

         }

     document.body.onmouseup = function(){

         document.body.onmousemove = null

         document.body.onmouseup = null

         }

     }

 </script>

 </body>

利用 border 实现的图片选区效果，只需一层图一蒙层的更多相关文章

  1. Android 利用TimerTask实现ImageView图片播放效果

    在项目开发中,往往 要用到图片播放的效果.今天就用TimerTask和ImageView是实现简单的图片播放效果. 当中,TimerTask和Timer结合一起使用.主要是利用TimerTask的迭代 ...

  2. 如何通过PS制作图片文字效果

    如图这是最终效果,下面我为大家介绍如何制作这种图片文字效果 准备一张图: 方法,步骤: 首先我们打开PHOTOSHOP,插入一张图片. 之后按键盘上面的"T"键快捷键启用文字工具, ...

  3. 原生 JavaScript 图片裁剪效果

    图片裁剪程序效果如下,可鼠标操作.   拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...

  4. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  5. Swift 2.0 封装图片折叠效果

    文/猫爪(简书作者)原文链接:http://www.jianshu.com/p/688c491580e3著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 用Swift封装图片折叠效果 b ...

  6. 《JavaScript 实战》：JavaScript 实现图片切割效果

    很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪.图片剪切(设置一下也可以做出放大镜等类似的效果).当时觉得很神奇,碍于水平有限,没做出来.前些日子突然想做一个透镜效果,就突然想到了这 ...

  7. 基于深度学习和迁移学习的识花实践——利用 VGG16 的深度网络结构中的五轮卷积网络层和池化层，对每张图片得到一个 4096 维的特征向量，然后我们直接用这个特征向量替代原来的图片，再加若干层全连接的神经网络，对花朵数据集进行训练（属于模型迁移）

    基于深度学习和迁移学习的识花实践(转)   深度学习是人工智能领域近年来最火热的话题之一,但是对于个人来说,以往想要玩转深度学习除了要具备高超的编程技巧,还需要有海量的数据和强劲的硬件.不过 Tens ...

  8. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  9. 搭建Android+QT+OpenCV环境，实现“单色图片着色”效果

               OpenCV是我们大家非常熟悉的图像处理开源类库:在其新版本将原本在Contrib分库中的DNN模块融合到了主库中,并且更新了相应文档.这样我们就能够非常方便地利用OpenCV实 ...

随机推荐

  1. shell 键盘录入和运算

    一.read 命令,从键盘读入数据,赋给变量 1.脚本代码 #!/bin/sh read arg1 arg2 echo "第一个参数: $arg1" echo "第二个参 ...

  2. C++中对字符串进行插入、替换、删除操作

    #include <iostream> #include <string> using std::cout; using std::endl; using std::strin ...

  3. LIVE555研究之五：RTPServer（二）

    port是一样的. DynamicRTSPServer 继承关系: Medium是非常多类的基类.内部定义了指向环境类的引用和一个char类型媒体名称.并定义了依照媒体名称,查找相应媒体的成员函数lo ...

  4. Win7上从硬盘安装Debian

    近期一直想将笔记本搞成Win7+Debian双系统.由于无论怎样优化,2G内存的Win7笔记本上开个Linux虚拟机都实在吃力. 经过一段时间的资料搜索.并阅读Debian官方的安装文档,今天最终实现 ...

  5. Javaee 应用分层架构

    应用分层的优点:修改方便,仅修改有问题的那层以及其相邻几层即可,层数越多,其相应的资源分配也会更加平均 缺点:耗费时间,速度慢,调用占用大量堆栈. JAVAEE的分层: 4层分法:1.客户层:运行在客 ...

  6. nmq 提交到 npm

    安装npm install nmq 源码:https://github.com/ronwe/nmq 此版本提供 pub/sub , 优化 pull

  7. 安卓获取百度地图的Api key

    1.进入开发中心 2.如何获取SHA1 3.如何获取包名

  8. composer是什么

    composer是什么 Composer 是 PHP5.3以上 的一个依赖管理工具.它允许你声明项目所依赖的代码库,它会在你的项目中为你安装他们.Composer 不是一个包管理器.是的,它涉及 &q ...

  9. ES什么时候会平衡分片

    "cluster.routing.allocation.balance.shard":"0.45f",//定义分配在该节点的分片数的因子 阈值=因子*(当前节点 ...

  10. JavaScript中Number常用属性和方法

    title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...