这篇文章主要介绍了 js 用拖动滑块来控制图片大小的方法, 实例分析了 javascript 使用鼠标事件的技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本文实例讲述了 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 程序设计有所帮助。
来源: