一个简单的javascript图片放大效果代码_图象特效

一个简单的图片放大效果:
参数说明:
1.berviary:String,需要被放大的图片id
2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div.
3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域
4.opacity:float,放大时图片被遮罩的区域的透明度
效果1:

调用的js代码:

复制代码 代码如下:

$E({berviary:"currentPic",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});

html代码:

复制代码 代码如下:

<div>
<div class="img_warp" id="img_warp">
<img src="1.jpg" alt="" class="current" id="currentPic" />
</div>
<div class="expand" id="expand" style="border: 1px solid #555; width:400px; height:400px;margin:-200px auto 0 auto; overflow:hidden;"></div>
</div>

演示效果:

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

时间: 2024-12-04 20:32:29

一个简单的javascript图片放大效果代码_图象特效的相关文章

javascript 图片放大效果函数_图象特效

演示示例 1.图片和放大使用不同的图片(大小图片要比例相同) 也可以指定放大倍数(相对于小图片计算) new imageZoom("img1",{ //mul:6,//指定放大的倍数 onShow:function() { document.title="show,you are moving on the image."; }, onHide:function() { document.title="you mouse move out the imag

js 新浪的一个图片播放图片轮换效果代码_图象特效

核心代码 复制代码 代码如下: function slide(src,link,text,target,attr,desc) {   this.desc = desc   this.src = src;   this.link = link;   this.text = text;   this.target = target;   this.attr = attr;   if (document.images) {     this.image = new Image();   }   thi

摘自百度的图片轮换效果代码_图象特效

这是一个网页设计中经常会用到的图片特效,实现多个图片之间的轮换,并分别带有连接,以前的代码只能适用于IE,在FF下始终没有得到很好的解决,今天意外的在百度联盟首页上看到这样的效果,支持FF,收藏起来备用.  "; //修改点1:循环添加内层div内容以增加个数 str += " 1 2 3 4 "; str += "" + tits[1] + ""; str += "

JS 图片缩放效果代码_图象特效

复制代码 代码如下: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel</TITLE> <SCRIPT> var count = 10; function Picture() { count = Counting(count); Resize

js鼠标移动在title中显示图片的效果代码_图象特效

测试中心,测试代码.理论上应该没问题了 ">大 ">小

JavaScript国旗变换效果代码_图象特效

1.页面的HTML代码如下: <img id="flag" src="Flags/cn_flag[1].gif" alt="" />  <select name="Country" accesskey="c" id="Country" onchange="change_flag(this);" runat="server" o&g

javascript 图片轮换显示效果代码_图象特效

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

javascript 图片滑动切换代码_图象特效

1 2 Next Back

javascript图片渐显效果代码_图象特效

在<head>到</head>之间插入如下的JAVASCRIPT代码: 在要插入的图片添加如下代码: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] *其中onMouseOver=nereidFade(this,50,10,4)中 style="FILTER: alpha(opacity=50)"表示图片的透明度为50%