主导正是利用replace替换img src的图纸路线,进而达成不一致尺寸图片的切换。
上面这些动画便是显得了尺寸切换,单击“大图”按键,则转移图片的src,加载大图,单击“小图”按键,则又显得小图。
replace用法简单批注: 作者其实也是生手,讲得不对望海涵。
字符串.replace;指的是用b将字符串含有a的有的代表,举个例子字符串obj=”welcome
to my website!”; obj.replace;指的是用字符串jb51net代替字符串obj中的my。
您有意思味能够利用以下代码做测量试验: 复制代码
代码如下: var obj=”welcome to my website!”; var newobj=obj.replace;
alert; 好了,就说这么多,越来越多能够学学的剧情在实例页面里。 大旨代码:
复制代码 代码如下:

在Flash中大家用蒙板加上一些粗略的剧本便可完成二个动态的图形凸镜。今后大家只用JavaScript结合CSS语言也足以轻松做出这几个效应。

包装下载地址 jquery-replace-pic-convert.rar

  创设思路:“火镜”后有生龙活虎幅背景图,它是“放大了”的图的本来。大家通过活动“火镜”时特别调解背景图的岗位,使它突显的恰巧是供给要松开的一些。

  作用演示: (点这里在新窗口中查看)

  营造步骤

  1卡塔尔先计划两幅内容风度翩翩律尺寸不一样的图片,这里大家找了贰个400×300像素的缩略图small_hill.gif,多个800×600像素的大图big_hill.gif。然后再筹算三个“火镜”的图纸,注意它中间有个别必得是透明的,这里大家绸缪了一个玛瑙红的方框
viewer.gif。

  2卡塔 尔(英语:State of Qatar)编写如下的代码:

  以下是两幅图的代码,都它们充任层。第生龙活虎幅是缩略图,第二幅是“突镜”,首先将它的背景移到不可以预知的地点;
个中“ onclick=”moveme=!moveme” ”表示每趟点击它都改成“moveme”的布尔值。

<img src=”small_hill.gif” id=”bgLayer” style=”position:absolute;
left:150px; top:50px;”>
<img src=”viewer.gif” id=”myviewer”  onclick=”moveme=!moveme”
onmousemove=”viewit(this)”
style=”left:0;top:0;background-repeat:no-repeat;
background-position:2000px 2000px;position:absolute;”>

以下是JavaScript脚本:

<script language=”JavaScript”>
  <!–
  var viewer_bgcolor=”#FFFFFF”;
//火镜的背景色,提出设成和网页背景象形似。
  var bigmap=”big_hill.gif”; //大图路线

  document.all.myviewer.style.backgroundImage=’url(‘+bigmap+’)’;
  document.all.myviewer.style.backgroundColor=viewer_bgcolor;
 
//因为大图作为背景不恐怕设定和读取它的尺码,只能把它的三个副本作为实图,但不可知:
乐百家loo777,  document.write(‘<img id=”getsize” style=”position:absolute;
left:-2000px; top:-2000px;” src=”‘+bigmap+'”>’);

  var moveme=false; //该布尔值决定“火镜”是不是随鼠标移动,发轫值为否
  function viewit(obj){
    if (moveme){
      //以下两行调节“火镜”的移动:
     
obj.style.left=event.x+parseInt(document.body.scrollLeft)-parseInt(obj.width)/2;
     
obj.style.top=event.y+parseInt(document.body.scrollTop)-parseInt(obj.height)/2;

    
//以下几行调治当“放大镜”移动时其背景图的岗位,使其宗旨移到缩略图的某点时,其背景图上相应的点也移步到其主导。
    
//当中Nx,Ny指大图宽和高分别是小图的几倍,bgx,bgy是背景图当移到的X,Y坐标。 
     
Nx=parseInt(document.all.getsize.width)/parseInt(document.all.bgLayer.width);
     
bgx=(-1)*(Nx-1)*(event.x-parseInt(document.all.bgLayer.style.left)+parseInt(document.body.scrollLeft))-parseInt(obj.style.left)+parseInt(document.all.bgLayer.style.left);

     
Ny=parseInt(document.all.getsize.height)/parseInt(document.all.bgLayer.height);
     
bgy=(-1)*(Ny-1)*(event.y-parseInt(document.all.bgLayer.style.top)+parseInt(document.body.scrollTop))-parseInt(obj.style.top)+parseInt(document.all.bgLayer.style.top);

      obj.style.backgroundPosition=bgx+” “+bgy;
    }
  }
  //–>
</script>

放大镜

–JS火镜突显– 单击”凸透镜”开头浏览,再一次单击截止。

乐百家loo777 1
乐百家loo777 2

[Ctrl+A 全选 注:如需引进外界Js需刷新技巧实行]

制作…

相关文章