编程 Javascript

js用拖动滑块来控制图片大小的方法

Posted in Javascript onFebruary 27, 2015

本文实例讲述了js用拖动滑块来控制图片大小的方法。分享给大家供大家参考。具体实现方法如下：

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv=Content-Type content="text/html;charset=gb2312">

<title>js拖动滑块控制图片显示大小</title>

<style>

*{margin:0;padding:0;font-size:12px;}

.btn{width:50px;height:15px;cursor:pointer;}

#picViewPanel{margin:5 50 0 50px; width:328px; height:248px;overflow:auto;text-align:center;border:solid 1px #cccccc;}

#slider{margin:0 50px;height:15px;width:328px;border:1px solid #000000;position:relative;}

#sliderLeft{height:13px; width:13px;float:left;border:1px solid #cccccc;cursor:pointer;}

#sliderBlock{height:13px;width:50px;border:1px solid #cccccc;position:absolute;top:0;left:113px;cursor:pointer;background:#cccccc;text-align:center;}

#sliderRight{height:13px;width:13px;float:right;border:1px solid #cccccc;cursor:pointer;}

</style>

</head>

<body>

<div id="picViewPanel"></div>

<div id="slider">

<span id="sliderLeft" ><<</span>

<span id="sliderRight">>></span>

<span id="sliderBlock">==</span>

</div>

</body>

<script>

//golbal

var pv = null;

var sd = null;

window.onload=function(){

pv = new PicView("/images/m01.jpg");

sd = new Slider(

function(p){

document.getElementById("sliderBlock").innerHTML = 2*p +"%";

pv.expand(2*p/100);

},function(){});

}

var PicView = function(url,alt){

this.url=url;

this.obj=null;

this.alt=alt?alt:"";

this.realWidth=null;

this.realHeight=null;

this.zoom=1;

this.init();

}

PicView.prototype.init=function(){

var _img=document.createElement("img");

_img.src = this.url;

_img.alt = this.alt;

_img.style.zoom = this.zoom;

document.getElementById("picViewPanel").appendChild(_img);

this.obj=_img;

this.realWidth=_img.offsetWidth;

this.realHeight=_img.offsetHeight;

}

PicView.prototype.reBind=function(){

this.obj.style.width =  this.realWidth*this.zoom+"px";

this.obj.style.height = this.realHeight*this.zoom+"px";

//this.obj.style.zoom = this.zoom;

}

PicView.prototype.expand=function(n){

this.zoom=n;

this.reBind();

}

var Slider = function(ing,ed){

this.block=document.getElementById("sliderBlock");

this.percent = 0;

this.value = 0;

this.ing = ing;

this.ed = ed;

this.init();

}

Slider.prototype.init=function(){

var _sx=0;

var _cx=0;

var o=this.block;

var me=this;

o.onmousedown=function(e){

var e=window.event||e;

_sx = o.offsetLeft;

_cx = e.clientX-_sx;

document.body.onmousemove=move;

document.body.onmouseup=up;

};

function move(e){

var e=window.event||e;

var pos_x = e.clientX - _cx;

pos_x=pos_x<13?13:pos_x;

pos_x=pos_x>248+15-50?248+15-50:pos_x;

o.style.left =  pos_x+"px";

me.percent=(pos_x-13)/2;

me.ing(me.percent);

}

function up(){

document.body.onmousemove=function(){};

document.body.onmouseup=function(){};

}

}

</script>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

js用拖动滑块来控制图片大小的方法

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js计算字符串长度包含的中文是utf8格式

Oct 15 Javascript

JavaScipt中栈的实现方法

Feb 17 Javascript

Bootstrap风格的WPF样式

Dec 07 Javascript

javascript事件的传播基础实例讲解(35)

Feb 14 Javascript

Vue.js事件处理器与表单控件绑定详解

Mar 20 Javascript

React 使用browserHistory项目访问404问题解决

Jun 01 Javascript

JS实现简单的文字无缝上下滚动功能示例

Jun 22 Javascript

微信小程序如何获取用户头像和昵称

Sep 23 Javascript

浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

Oct 23 Javascript

微信小程序实现图片压缩

Dec 03 Javascript

AI小程序之语音听写来了，十分钟掌握百度大脑语音听写全攻略

Mar 13 Javascript

Vue 修改网站图标的方法

Dec 31 Vue.js

javascript中局部变量和全局变量的区别详解

Feb 27 #Javascript

对比分析AngularJS中的$http.post与jQuery.post的区别

Feb 27 #Javascript

JavaScript中Function详解

Feb 27 #Javascript

JS实现图片产生波纹一样flash效果的方法

Feb 27 #Javascript

js实现鼠标触发图片抖动效果的方法

Feb 27 #Javascript

javascript实现当前页导航激活的方法

Feb 27 #Javascript

jquery 根据name名获取元素的value值

Feb 27 #Javascript

You might like

PHP 的几个配置文件函数

2006/12/21 PHP

FCKeditor的安装(PHP)

2007/01/13 PHP

PHP 遍历文件实现代码

2011/05/04 PHP

PHP 自定义错误处理函数trigger_error()

2013/03/26 PHP

php+html5基于websocket实现聊天室的方法

2015/07/17 PHP

学习php设计模式 php实现访问者模式(Visitor)

2015/12/07 PHP

php实现三级级联下拉框

2016/04/17 PHP

Javascript实现的分页函数

2007/02/07 Javascript

来自国外的14个图片放大编辑的jQuery插件整理

2010/10/20 Javascript

JQuery中getJSON的使用方法

2010/12/13 Javascript

通过隐藏iframe实现文件下载的js方法介绍

2014/02/26 Javascript

兼容主流浏览器的JS复制内容到剪贴板

2014/12/12 Javascript

JS仿iGoogle自定义首页模块拖拽特效的方法

2015/02/13 Javascript

JavaScript代码实现图片循环滚动效果

2020/03/19 Javascript

JavaScript兼容浏览器FF/IE技巧

2016/08/14 Javascript

JavaScript中访问id对象属性的方式访问属性(实例代码)

2016/10/28 Javascript

seajs中最常用的7个功能、配置示例

2017/10/10 Javascript

Layer弹出层动态获取数据的方法

2018/08/20 Javascript

ES6知识点整理之模块化的应用详解

2019/04/15 Javascript

解决Vue打包后访问图片/图标不显示的问题

2019/07/25 Javascript

微信小程序点击保存图片到本机功能

2019/12/13 Javascript

JS实现页面数据懒加载

2020/02/13 Javascript

[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片

2016/03/16 DOTA

python从ftp下载数据保存实例

2013/11/20 Python

Python基于回溯法子集树模板解决最佳作业调度问题示例

2017/09/08 Python

Python发送http请求解析返回json的实例

2018/03/26 Python

python读取Excel实例详解

2018/08/17 Python

Python正则表达式匹配日期与时间的方法

2019/07/07 Python

解决pytorch下出现multi-target not supported at的一种可能原因

2021/02/06 Python

MCAKE蛋糕官方网站：一直都是巴黎的味道

2018/02/06 全球购物

家乐福台湾线上购物网：Carrefour台湾

2020/09/15 全球购物

优秀教师工作感言

2014/02/16 职场文书

意向书范本

2014/07/29 职场文书

2014年旅游局法制宣传日活动总结

2014/11/01 职场文书

优秀高中学生评语

2014/12/30 职场文书

多人股份制合作协议书

2016/03/19 职场文书