本文实例讲述了jQuery插件kinMaxShow扩展效果用法。分享给大家供大家参考。具体分析如下:

支付宝首页的焦点图就是用的kinMaxShow 扩展效果(前段时间支付宝使用的,不知道现在还是不是这种,另外支付宝的这个焦点图动画效果是分浏览器的,IE8及以下浏览器无动画纯静态,只是在谷歌、火狐等现代浏览器才会出现动画。) 这只是kinMaxShow扩展的一个小例子,更多效果你可以自己发挥。 代码如下:

javascript 代码:

<script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">

HTML 代码:

<div id="kinMaxShow">
 <div>
 <!--这是焦点图大图图片,下面为动画元素所需图片-->
 <img src="/UploadFiles/2021-04-02/1.jpg">

CSS样式:

<style type="text/css">
#kinMaxShow{display:none;}
#kinMaxShow .sub_1_1{
display:block; position:absolute;left:110px; top:136px;
}
#kinMaxShow .sub_1_2{
display:block; position:absolute;left:110px; top:120px;
}
#kinMaxShow .sub_2_1{
display:block; position:absolute;left:-160px; bottom:0px;
}
#kinMaxShow .sub_2_2{
display:block; position:absolute;left:110px; top:20px;
}
#kinMaxShow .sub_3_1{
display:block; position:absolute;right:180px; bottom:0px;
}
#kinMaxShow .sub_3_2{
display:block; position:absolute;left:30px; top:40px;
}
</style>

希望本文所述对大家的jQuery程序设计有所帮助。

标签:
jQuery插件,kinMaxShow扩展

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“jQuery插件kinMaxShow扩展效果用法实例”

暂无“jQuery插件kinMaxShow扩展效果用法实例”评论...