• Hello!欢迎来到网页设计学!
当前位置: 首页 > HTML&CSS > jQuery插件:鼠标经过图片放大

jQuery插件:鼠标经过图片放大

.................................................................................................................................................................

有时候网站上的图片比较小,客户想要看到产品的更多细节,就需要放大图片,我们可以用jQuery插件来实现当鼠标经过图片时,图片可以自动放大,首先我建议先看看 演示 效果,如果可以用到你的网站中,可以下载插件:zoom image

img

Html文件

<a href=”large.jpg”><img src=”small.jpg” alt=”Small image” /></a>

Css文件
你可以自己定义放大后图片的css样式,这里所演示的样式如下:

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:15px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

jQuery文件

下面是jQuery使用的默认值和说明:

id
默认值: “ easy_zoom ”
新创建的放大图像元素的ID,当然你也可以使用你自己的,但要确保要和你所创建的CSS相对应 。

Parent

默认值: “body”
定义新创建的放大图像元素将被插入的DOM元素,您可以通过编辑这个选项插入到你喜欢的任何地方。

preload
默认值: “Loading… ”
大图片加载前所显示的文字:正在加载。

error
默认值: “There has been a problem with loading the image. ”
若大图片未找到或无法加载时,会出现此错误消息,您可以使用此选项自定义错误消息。

下面是使用一些自定义选项的示例代码:

jQuery(function($){

$(‘a.zoom’).easyZoom({

id: ’imagezoom’,

preload: ’<p class=”preloader”>Loading the image</p>’

parent: ’#container’

});

 

本文链接:jQuery插件:鼠标经过图片放大

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流