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

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

赞 (0)

相关推荐

  • Javascript 鼠标移动上去 滑块跟随效果代码分享

    Javascript 鼠标移动上去 滑块跟随效果代码分享

    先来一张截图. 鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随.不管有多少个都可以.javascript code: 复制代码 代码如下: function changeCoord(id, left) { $$(id).style.left = left;} function $$(id) { return document.getElementById(id);} function $$$(id) { return document.getElementsByClassNam

  • jQuery实现移动端滑块拖动选择数字效果

    jQuery实现移动端滑块拖动选择数字效果

    本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 运行效果图: 实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>demo</title> <link rel="stylesheet"

  • 基于jquery实现鼠标左右拖动滑块滑动附源码下载

    基于jquery实现鼠标左右拖动滑块滑动附源码下载

    在没步入正文之前,先给大家贴效果图,看看是不是您想要的效果: 在线演示 源码下载 基于jQuery移动端滑块拖动设置代码.这是一款支持手机移动端的特效,可拖动滑块范围选择器,拖动滑块数值选择器. 废话不多说了,直接给大家贴代码了. html代码: <div class="demo"> <input type="hidden" class="single-slider" value="0" /> <

  • js实现兼容PC端和移动端滑块拖动选择数字效果

    本文为大家分享了js实现移动端滑块拖动选择数字的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="viewport&qu

  • JS响应鼠标点击实现两个滑块区间拖动效果

    JS响应鼠标点击实现两个滑块区间拖动效果

    本文实例讲述了JS实现的两个滑块区间拖动效果代码.分享给大家供大家参考,具体如下: 网页上的滑块功能如何实现呢?其实用JS就可以,这就是一个网页滑块,两个滑块可以任意拖动,形成一个滑块区间,而且代码兼容IE和其它主流的浏览器,两个滑块确定一个区间范围. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/ 具体代码如下: <!DOCTYPE html> <html> <head>

  • 基于JS组件实现拖动滑块验证功能(代码分享)

    拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m

  • JS实现网页游戏中滑块响应鼠标点击移动效果

    本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了 取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html

  • Javascript实现滑块滑动改变值的实现代码

    Javascript实现滑块滑动改变值的实现代码

    最近做了一个关于税务的功能,值得一说的是本页面的滑块实现.大家都知道现实中的程序员大部分都是对于页面和美工不是很熟悉. 本人也是,但是本人比较喜欢自己动手来实现.废话不多说.上图: 实现结果: 部分js代码: 复制代码 代码如下: window.onload = function () { var oWin = document.getElementById("win"); var bDrag = false; var disX = disY = 0; oWin.onmousedown

  • 基于JavaScript实现拖动滑块效果

    基于JavaScript实现拖动滑块效果

    本文实例为大家分享了js拖动滑块效果的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content=&q

  • jQuery插件slider实现拖动滑块选取价格范围

    jQuery插件slider实现拖动滑块选取价格范围

    在一些产品报价网站上,需要给出一系列价格范围供用户筛选,我们在筛选的范围之外再加一个自定义价格范围,这样为用户多提供了一种选择方式.本文将使用jQuery插件结合CSS实现使用滑块滑动的方式选择价格范围,请看本文讲解. jQuery ui 有个slider插件,就是一个非常好使的拖动滑块插件.要想实现滑块拖动,需要在页面head间先载入如下js. <script type="text/javascript" src="js/jquery.js"><

随机推荐