js实现用滚动条来放大缩小图片的代码

这段时间比较闲,就搞了这么一个功能来练练手。
因为没有系统的学习过javascript,很多东西都是现学现用。请大家多提宝贵意见,谢谢

无标题文档

//----------------------------------------------------------------------------------------------
// 功能说明:用于放大图片的滚动条,可放大至图片的原始大小。在ie6,ie7,ff1.5下可用
// 使用方法:在图片代码里加上resizeable=1,同时在onload事件里加上createResizeScroll函数
// code by: blues[2007-7-17]
//----------------------------------------------------------------------------------------------
//始初化变量
var oScroll=null,sScrollState=null,iScrollPos=0,iBrowser;
//------------------------------------------------------------------------------------------------
//页面初始化函数
//------------------------------------------------------------------------------------------------
function winInit(){
//检测浏览器类型
var __Agt = navigator.userAgent.toLowerCase();
var __If = /(firefox|netscape|opera).?[\/| ](.)\.([^;\)]+|[^\)]+\))$/.exec(__Agt);
if(!__If) __If = /(msie) (.)\.[^;]+;/.exec(__Agt);
var _Br=__If[1], _Ver=__If[2];
__Agt=null,__If=null;
if(_Br=="msie"){iBrowser=0;}
else if(_Br=="firefox"){iBrowser=1;}
else{iBrowser=2;}
}
//------------------------------------------------------------------------------------------------
//加上滚动条
//------------------------------------------------------------------------------------------------
function createResizeScroll(){
var objs=getByTag("IMG");
var i,endi=objs.length;
var oFunc;
for(i=0;i205)n_x=205;
oScroll.style.marginLeft=n_x+"px";
//经过计算得出滚动条的marginLeft值(margin-left的取值范围为[5~205]px)
n_x-=5;
//将滚动条的位置值换算成宽高值(之前已经计算得到了宽高的换算比例),赋给图片
var img=oScroll._forobj;
img.width=n_x*img._wbl+img._width;
img.height=n_x*img._hbl+img._height;
}else{doneMoveScrollBut();}
}
}
//------------------------------------------------------------------------------------------------
//给对象的指定事件加上函数功能
//------------------------------------------------------------------------------------------------
function AttachEvent(object,eventName,func,cancelBubble){
var cb=cancelBubble?true:false;
eventName=eventName.toLowerCase();
if(document.attachEvent){object.attachEvent(eventName,func);}
else{object.addEventListener(eventName.substr(2),func,cb);}
}
//------------------------------------------------------------------------------------------------
//简写函数
//------------------------------------------------------------------------------------------------
function getById(str){return document.getElementById(str);}
function getByName(str){return document.getElementsByName(str);}
function getByTag(str){return document.getElementsByTagName(str);}
//------------------------------------------------------------------------------------------------
//获取鼠标坐标
//------------------------------------------------------------------------------------------------
function getPostion(XorY,e){
if(iBrowser==0){
if(XorY=="x"){return event.x;}
else if(XorY=="y"){return event.y;}
else{return false;}
}
else{
if(XorY=="x"){return e.pageX;}
else if(XorY=="y"){return e.pageY;}
else{return false;}
}
}
//------------------------------------------------------------------------------------------------
//获取事件对象
//------------------------------------------------------------------------------------------------
function getEvent(e){
if(iBrowser==0){return event.srcElement;}
else{return e.target;}
}
//------------------------------------------------------------------------------------------------
//加入事件监听
//------------------------------------------------------------------------------------------------
AttachEvent(window,"onload",winInit,false);
AttachEvent(window,"onload",createResizeScroll,false);
AttachEvent(document,"onmousemove",moveScrollBut,false);
AttachEvent(document,"onmouseup",doneMoveScrollBut,false);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

另外问大家个问题,像我这样自定义属性的方式行不行的?就是在<img>标签里加上了自定义的 resizeable="1"。在DW里会报警,这样是不是通不过w3c认证的?

(0)

相关推荐

  • 纯JS实现旋转图片3D展示效果

    CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type

  • JS简单的图片放大缩小的两种方法

    以左上角为定点,放大缩小,该点位置不变. 方法一: Html代码 复制代码 代码如下: <script type="text/javascript">         //兼容IE和火狐   缩小放大.缩放         function ImageSuofang(args) {             var oImg = document.getElementById("oImg");             if (args) {        

  • js实现图片放大缩小功能后进行复杂排序的方法

    这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动. 首先来看下最终的效果图: 有人可能看到这个会觉得,这有什么难的,这么简单的事,楼主是不是太小提大作了?当你真正去尝试时,你才知道到底有什么难点. 首先,我们来讲下需求: 1.图片分为大小和小图,大图占四个小图的位置, 2.点击图片放大缩小, 重新排列顺序, 3. 当点击偶数列(2,4)时,它前面的那项将向提出来向后面排列 4.第一个项不能动,点第二个是将占第三四的位置,从后面取第一个小

  • javascript 图片放大缩小功能实现代码

    看JS源码: 复制代码 代码如下: // 放大缩小控制 var PhotoSize = { zoom: 0, // 缩放率 count: 0, // 缩放次数 cpu: 0, // 当前缩放倍数值 elem: "", // 图片节点 photoWidth: 0, // 图片初始宽度记录 photoHeight: 0, // 图片初始高度记录 init: function(){ this.elem = document.getElementById("focusphoto&qu

  • 特漂亮的JS图片排列旋转效果代码

    了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来pp! body{background:black} .point{position:absolute;height:75px;border:1px silver solid} #round{position:absolute;background:red;width:200px;height:200px;} var r=200,dv=0.01,w=100,x=400;y=100,pn=8 var pi=3.1415926575,d=p

  • 用javascript实现旋转图片效果的代码

    旋转图片 '); document.write(' '); for (n=0; n '); document.write(' '); document.write(' '); function FollowMouse(){ Xpos = document.body.scrollLeft+event.x+UpDown; Ypos = document.body.scrollTop+event.y+LeftRight; } document.onmousemove = FollowMouse; }

  • JS实现图片平面旋转的方法

    本文实例讲述了JS实现图片平面旋转的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //

  • js实现图片旋转 js滚动鼠标中间对图片放大缩小

    从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. 这个图片放大,缩小和旋转,我采用canvas画布这个来做的,核心点就在js中去控制鼠标状态及事件. 我先给大家展示一下效果图. 鼠标移到画布范围内就会出现下方的操作栏,每次以90度选择. 1.在引入js的时候一定要注意了,由于在使用画布canvas时,需要等图片加载完成后才可以执行画布里的内容.j

  • js实现图片旋转的三种方法

    1 使用jQueryRotate.js实现 示例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1 { width: 800px; height: 600px; background-color: #ff0; position: absolute; } .imgRotate { widt

随机推荐