模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
表单按钮特效代码
>
收藏
分享
查看评论
表单按钮
演示
拖动条改变图片大小_表单按钮特效
查看演示效果
特效Tag:
滚动条
添加
拖动条改变图片大小,通过左右拖拉滚动条,使指定图片按比例放大或缩校
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type mrc="text/html;charset=gb2312"> <title>拖动条改变图片大小</title> <style> *{margin:0;padding:0;font-size:12px;} .btn{width:50px;height:15px;cursor:pointer;} #picViewPanel{margin:5 50 0 50px; width:278px; height:200px;overflow:auto;text-align:center;border:solid 1px #cccccc;} #slider{margin:0 50px;height:15px;width:278px;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://www.mb5u.com/images/logo.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> </html>
所属频道:
表单按钮特效
/
更新时间:2012-11-28
[收藏]
[报错]
[返回列表]
相关
表单按钮特效
:
又一个带描述的表单
可自由移动位置的导航条
页面转跳。跟本站的教学文章中的那些转到第几页一样的
带Checkbox的列表框
提供四种打开新窗的形式
自动复制代码
方便登录各种管理页面以及任何EMAIL量身定做!
QQ分类搜索代码
查找表格的内容
一个带描述的表单
常用email检验函数
file框模拟新解
表单按钮特效Rss订阅
特效代码搜索
表单按钮特效推荐
一个清新的CSS表单布局
CSS+JS实现的漂亮圆角按钮
Javascript删除数据时的确认对话框
QQ分类搜索代码
JavaScript检测EMail地址输入是否正确
JS无刷新注册表单检测效果
一个按钮完成对文本框内容的copy和复制
JS输入限制,不符要求不能输入的代码
点击按钮后加载进度条
复选框在鼠标移上后自动打勾选中
猜你也喜欢看这些
强大的JavaScript万年历(含农历)
JavaScript日期输入控件
在状态栏中显示停留时间
祥细的Form栏特全时钟
一个以二进制显示的时钟
跟随鼠标的日期表盘特效
一个定时的倒记时
Js日期选择并自动加入输入框
用JS统计网页运行或停留的时间
Js博客日历控件
相关链接:
复制本页链接
|
搜索拖动条改变图片大小
特效说明:
表单按钮模板
-
拖动条改变图片大小
。