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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
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函数
2010/01/11 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
php7 新增功能实例总结
2020/05/25 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python对html过滤处理的方法
2018/10/21 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Django Form常用功能及代码示例
2020/10/13 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
法律专业个人实习自我鉴定
2013/09/23 职场文书
煤矿班组长的职责
2013/12/25 职场文书
上课玩手机检讨书
2014/02/08 职场文书
财务科科长岗位职责
2014/03/10 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
同意报考证明
2015/06/17 职场文书
2016新年致辞
2015/08/01 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书