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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
Javascript 二维数组
Nov 26 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python类class参数self原理解析
2020/11/19 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
结婚典礼主持词
2015/06/29 职场文书
企业年会祝酒词
2015/08/11 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书