<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. webpack实战---安装操作

    什么是webpack? 他有什么优点?     首先对于很多刚接触webpack人来说,肯定会问webpack是什么?它有什么优点?我们为什么要使用它?     Webpack是前端一个工具,可以让各 ...

  2. nyoj 1189 yougth和他的朋友们 (DP)

    题目:pid=1189" target="_blank">nyoj 1189 yougth和他的朋友们 这题目是14年北京赛区的原题.讲题的时候说有三种解法,我们是 ...

  3. [Angular] Handle HTTP Errors in Angular with HttpErrorResponse interface

    When communicating with some backend API, data travels over the network using the HTTP protocol. As ...

  4. HDU 5228 ZCC loves straight flush( BestCoder Round #41)

    题目链接:pid=5228">ZCC loves straight flush pid=5228">题面: pid=5228"> ZCC loves s ...

  5. servlet修改后无效，仍然还是修改之前的效果

    注意servlet的路径是否正确,默认是java resources文件夹中的src.当在webcontent->web-inf->classses->data中时,注意添加路径.否 ...

  6. DNS Tunnel判定方法

    DNS Tunnel判定方法: 1.查询DNS请求的域名是否存在备案: 2.查询DNS请求的域名情报信息(以及域名的alex排名): 3.查看相同主域名下子域名编码格式及长度:(存在Base32和Ba ...

  7. zzuoj--10399--Turing equation（模拟）

    Turing equation Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 152  Solved: 85 [Submit][Status][Web ...

  8. Linux下DNS服务器搭建详解

    Linux下DNS服务器搭建详解 DNS  即Domain Name System(域名系统)的缩写,它是一种将ip地址转换成对应的主机名或将主机名转换成与之相对应ip地址的一种机制.其中通过域名解析 ...

  9. springboot shiro 多realm配置认证、授权

    shiro进行登录认证和权限管理的实现.其中需求涉及使用两个角色分别是:门店,公司.现在要两者实现分开登录.即需要两个Realm——MyShiroRealmSHOP和MyShiroRealmCOMPA ...

  10. R学习小计

    安装R扩展包:install.packages("FKF")http://www.douban.com/note/243004605/1.输入数据 l读入有分隔符数据:A<- ...