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 序列化对象实现代码
Dec 18 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
vue实现前端分页完整代码
Jun 17 Javascript
手把手教你如何编译打包video.js
Dec 09 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的pcntl多进程用法实例
2015/03/19 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP如何将XML转成数组
2016/04/04 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
JS实现星星海特效
2019/12/24 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
python实现排序算法
2014/02/14 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
致铅球运动员广播稿精选
2014/01/12 职场文书
企业出纳岗位职责
2014/03/12 职场文书
冬季安全检查方案
2014/05/23 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python