网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
背景图像
-> 拖动滑块控制图片显示大小
拖动滑块控制图片显示大小
作者:admin 发布时间:2010-9-29 9:17:48 发布人: admin
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>拖动滑块控制图片显示大小丨网页特效丨myjs.jz123.Cn</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("http://web.archive.org/web/20150530174320/http://myjs.jz123.cn/img/tool.gif"); 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> </body> </html>
拖动滑块控制图片显示大小
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
滑动的div层做的动态菜单
下一篇:文章:
用鼠标滚轮滚动控制图片的缩小放大
本类浏览排行 »
用鼠标滚轮滚动控制图片的缩小放大
拖动滑块控制图片显示大小
滑动的div层做的动态菜单
一款三级下拉导航菜单
XHTML+CSS制作的下拉导航菜单
css实现的目录树型导航菜单
CSS制作的带凹凸阴影效果的网站导航
纯CSS制作的三级下拉菜单
本站推荐文章 »
滑动的div层做的动态菜单
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡