<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. NYIST 749 蚂蚁的难题(八)

    蚂蚁的难题(八)时间限制:2000 ms | 内存限制:65535 KB难度:5 描述蚂蚁是一个古玩爱好者,他收藏了很多瓶瓶罐罐. 有一天,他要将他的宝贝们一字排开, 摆放到一个长度为L的展台上. 已 ...

  2. HDU——T 1054 Strategic Game

    http://acm.hdu.edu.cn/showproblem.php?pid=1054 Time Limit: 20000/10000 MS (Java/Others)    Memory Li ...

  3. jquery简直是太酷炫强大了

    链接地址:http://www.yyyweb.com/350.html Web 开发中很实用的10个效果[源码下载] 小鱼 发布于 3年前 (2014-07-15) 分类:前端开发 阅读(303741 ...

  4. 基于ORA-12170 TNS 连接超时解决办法详解

    转自原文 基于ORA-12170 TNS 连接超时解决办法详解 1.开始----程序-----Oracle------配置和移植工具-----Net Manager----本地----服务命名---o ...

  5. android:px,dp(dip),sp的差别

    1.px:表示屏幕的实际像素,比如320*480的屏幕在横向有320个像素,在纵向有480个像素,假设指定的某个空间的单位为px.那么在不同分辨率下的手机上.显示的都是指定的大小.一般不推荐使用px. ...

  6. C/C++易错难点笔记01

    疑惑点 C++是一门奇妙的语言.非常多时候你对底层不熟悉,非常难知道某些情况下的结果,以下是我不断积累的疑惑点,这里将其记录下来. 类的转换问题 代码: class A{ public: virtua ...

  7. Chisel实验笔记（四）

    在<Chisel实验笔记(二)>中.通过编写TestBench文件,然后使用Icarus Verilog.GtkWave能够測试,查看相关波形.比較直观,在<Chisel实验笔记(三 ...

  8. node21---mongoose

    01.js //引包 var mongoose = require('mongoose'); //创建一个数据库连接 mongoose.connect('mongodb://localhost/tes ...

  9. bzoj5157: [Tjoi2014]上升子序列(树状数组LIS)

    5157: [Tjoi2014]上升子序列 题目:传送门 题解: 学一下nlogn的树状数组求最长上生子序列就ok(%爆大佬) 离散化之后,用一个数组记录一下,直接树状数组做 吐槽:妈耶...一开始不 ...

  10. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...