软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 图片放大镜(支持数目/位置/倍数等设置)

图片放大镜(支持数目/位置/倍数等设置)

  烈火网(LieHuo.Net)教程 之前小编看过好多放大镜效果,并且我们在烈火网的教程中也提到过此类例子,如《JavaScript 移动焦点放大图片局部效果代码》、《各类CMS通用“鼠标触发”放大图片效果》等,今天我们再来看一个功能更加强大的例子,可以设置部分图片和网页的全部图片放大,同时也可以指定放大显示的位置、放大倍数等等。

  参数意义

var options={
img:null,//原img
targetimg:null,//默认为原图,可设置效果img路径
zoom:4,//放大倍数,默认为4
targetdiv:null,//效果容器div,样式要求请查看targetcss
targetcss:null,//效果容器的css样式。(targetdiv存在时失效。)[例]:'position:absolute;left:100px;width:100px;height:100px;',其中position,width,height值必填!
distance:20//效果容器据原图横向距离,默认为20。(targetdiv存在时,distance失效)
};

  使用方法

//为本页所有img添加放大镜效果
var run1=function(){
//获取所有img
var imgs=document.getElementsByTagName('img');
var obs=[];
for(var i=0;i< imgs.length;i++){
obs.push({img:imgs[i],distance:30});
}
//以数组形式添加
Gsee.addview.apply(Gsee,obs);
}


/**在目标div显示**/
var run2=function(){
Gsee.addview({
img:"gimg_1",
targetdiv:'gdiv_1'
})
}
/**在指定位置显示**/
var run3=function(){
Gsee.addview(
{img:'gimg_1',targetcss:document.getElementById('tagetcssdiv').value}
);
}
/**设置横向距离与放大倍数**/
var run4=function(){
Gsee.addview(
{img:'gimg_1',distance:200,zoom:10}
);
}

  目标div: 

/**//**同时设置多张图片效果**/
var run5=function(){
Gsee.addview(
{img:"gimg_2"},
{img:"gimg_3",distance:80,zoom:8},
{img:"gimg_4",zoom:10}
);
}

  下面是实例代码与运行效果,请选择操作。


提示:可修改后代码再运行!

    相关阅读
    网友评论
    栏目导航
    推荐软件