<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. tp框架表单提交注意！不要提交到当前方法

    tp框架  表单提交到当前方法,会重复执行显示部分和保存部分的代码.导致不知名的错误.

  2. POJ——T2186 Popular Cows || 洛谷——P2341 [HAOI2006]受欢迎的牛

    http://poj.org/problem?id=2186 || https://www.luogu.org/problem/show?pid=2341 Time Limit: 2000MS   M ...

  3. iOS 手势识别器概述

    手势识别器 iOS 手势识别器(UIGestureRecognizer) 点击手势(UITapGestureRecognizer) 滑动手势(UISwipeGestureRecognizer) 旋转手 ...

  4. centos下mysql多实例安装3306、3307实例（2014-10-15）

    背景说明       mysql的安装方法有多种,如二进制安装.源代码编译安装.yum安装等.yum安装仅仅能安装mysql 5.1 版本号:源代码安装编译的过程比較长.若没有对源代码进行改动且要求使 ...

  5. perl getopt 用法

    我们在linux经常常使用到一个程序须要增加參数,如今了解一下perl中的有关控制參数的函数.getopt.在linux有的參数有二种形式.一种是--help,还有一种是-h.也就是-和--的分别.- ...

  6. m_Orchestrate learning system---二十、如何写代码不容易犯错

    m_Orchestrate learning system---二十.如何写代码不容易犯错 一.总结 一句话总结:能排序多排序 这次查错的启示: 1.代码数据更规整:要是取出的数据排序的话可以减少很多 ...

  7. HMM（隐马尔科夫模型）——本质上就是要预测出股市的隐藏状态（牛市、熊市、震荡、反弹等）和他们之间的转移概率

    摘自:http://blog.csdn.net/baskbeast/article/details/51218777 可以看 <统计学习方法>里的介绍 举一个日常生活中的例子,我们希望根据 ...

  8. 访问Storm ui界面，出现org.apache.thrift7.transport.TTransportException: java.net.ConnectException: Connection refused的问题解决（图文详解）

    不多说,直接上干货! 前期博客 apache-storm-0.9.6.tar.gz的集群搭建(3节点)(图文详解) 问题详情 org.apache.thrift7.transport.TTranspo ...

  9. JavaScript学习——BOM对象

    1.BOM 对象:浏览器对象模型(操作与浏览器相关的内容) 2.Window 对象 Window 对象表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInt ...

  10. 解决maven 无法下载java-memcached的依赖问题

    1.进入https://github.com/gwhalin/Memcached-Java-Client/downloads 下载java-memcached的jar包. 2.使用cmd进入maven ...