<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. STM32 SPI 发送第一个数据不成功问题

    STM32的标准库,跟HAL库都是很实用的, 在使用SPI库的过程中一定要注意时序的问题. 我在调试SPI过程中,调试了两个IC,都是用HAL库, 第一个IC没出问题,第二个IC出现了第一次发送数据不 ...

  2. org.apache.hadoop.ipc.Client: Retrying connect to server

    这个问题导致jps查看结点进程时发现找不到NodeManager或一段时间后消失,网上查找了很多博客,因hadoop版本不一样且出错的原因也可能不同,所以找了老半天. 步骤:jps --> 看l ...

  3. mybatis批量插入oracle大量数据记录性能问题解决

    环境: mybatis  + oracle11g r2 1.使用"直接路径插入"(以下sql语句中的"/*+append_values */"),而且使用key ...

  4. Servlet体验之旅（二）——Session、Cookie

    我们知道Session和Cookie都是用于会话跟踪的,仅仅是实现的方式不大一样,那么他们到底有什么不同呢?以下跟着我脚步来了解一下: Session.Cookie的含义: Session 一种ser ...

  5. I hate it （线段树）

    B - I Hate It Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submi ...

  6. Android开发之AudioManager（音频管理器）具体解释

    AudioManager简单介绍: AudioManager类提供了訪问音量和振铃器mode控制. 使用Context.getSystemService(Context.AUDIO_SERVICE)来 ...

  7. 归并排序(Python)

    一.采用分治策略:将原问题划分成n个规模较小的但结构和原问题相同的子问题,递归解决这些子问题后合并各个结果从而得到原问题的解. 二.分治策略的步骤: 分解:将原问题分解成一系列子问题 解决:子问题粒度 ...

  8. setsockopt 设置socket

    1.closesocket(一般不会立即关闭而经历TIME_WAIT的过程)后想继续重用该socket:BOOL bReuseaddr=TRUE;setsockopt(s,SOL_SOCKET ,SO ...

  9. ThinkPHP5.0框架开发实现简单的页面跳转

    ThinkPHP5.0框架开发实现简单的页面跳转 一.效果 登录界面 登录成功界面 登录失败界面 二.目录结构 三.代码 控制器中的Login.php <?php // 声明命名空间 names ...

  10. nyoj--1058--部分和问题(dfs)

    部分和问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 给定整数a1.a2........an,判断是否可以从中选出若干数,使它们的和恰好为K. 输入 首先,n和k, ...