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

更新时间：2015年02月27日 10:07:52 作者：代码家园

这篇文章主要介绍了js用拖动滑块来控制图片大小的方法,实例分析了javascript使用鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

nodejs读取本地中文json文件出现乱码解决方法
在本篇文章中我们给大家分享了关于nodejs读取本地中文json文件出现乱码的解决方法，需要的朋友们可以学习下。
2018-10-10
js防抖和节流的深入讲解
这篇文章主要给大家介绍了关于js防抖和节流的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
javascript实现动态统计图开发实例
这篇文章主要介绍了javascript实现动态统计图开发实例，需要的朋友可以参考下
2015-11-11
微信小程序纯文本实现@功能
这篇文章主要介绍了ZZ需求小程序纯文本实现@功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
深入浅析JavaScript中的in关键字和for-in循环
这篇文章主要介绍了JavaScript中的in关键字和for-in循环，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
js实现仿爱微网两级导航菜单效果代码
这篇文章主要介绍了js实现仿爱微网两级导航菜单效果代码,通过javascript自定义函数结合鼠标点击事件实现tab切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
微信小程序实现通过js操作wxml的wxss属性示例
这篇文章主要介绍了微信小程序实现通过js操作wxml的wxss属性,结合实例形式分析了微信小程序使用js操作wxml的wxss属性相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
2018-12-12
图片连续不间断滚动像册
图片连续不间断滚动像册...
2007-01-01
JS实现京东首页之页面顶部、Logo和搜索框功能
这篇文章主要实现京东的页面顶部，logo和搜索框功能，本文有效果展示，页面布局详细分析，具体实现代码，介绍的非常详细，具有参考借鉴价值，需要的的朋友参考下吧
2017-01-01
微信小程序实现全局状态管理的方法整理
已知微信小程序中如果要做到全局状态共享，常用的有四种方式，分别是globalData、本地缓存、mobx-miniprogram和westore，本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理，需要的可以收藏一下
2023-06-06