jquery 360度旋转插件UIMIX.fullview

所属分类:媒体-图片展示

 37717  345  查看评论 (16)
分享到微信朋友圈
X
jquery 360度旋转插件UIMIX.fullview ie兼容6

实现代码

引用jquery和threesixty.js到页面任意位置

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/threesixty.min.js"></script>


html

path_pattern 图片调用地址

<div id="threesixty" image_count='37' path_pattern='http://www.jq22.com.cn/360/img-white/white#index#.jpg' end_frame='74' scale='1' fix_width='700' fix_height='700' max_width='700' max_height='700'>
<em class="loading"><p>0%</p></em>.
<ol></ol>
</div>

css

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial;}
/* threesixty */
#threesixty{position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;}
#threesixty ol{display: none;}
#threesixty img{position:absolute;top:0;width:100%;height:auto;}
.current-image{visibility:visible;width:100%;}
.previous-image{visibility:hidden;width:0;}
#threesixty .loading{position:absolute;left:50%;top:50%;width:90px;height:90px;margin-left:-45px;margin-top:-50px;display:none;}
#threesixty .loading span{position:absolute;top:50%;width:100%;color:#333;font-size:12px;font-family:Arial, Verdana, sans;text-align:center;line-height:1em;margin-top:-0.5em;}
#threesixty em.loading{width:55px;padding:40px 0 0 0;display:block;position:absolute;top:50%;left:50%;margin:-27px 0 0 -27px;background:url(images/loading-ico.gif) no-repeat 10px 0;z-index:999999;text-align:center;font-size:12px;color:#219edf;font-family:Arial;font-style:normal;}
</style>
相关插件-图片展示

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 46445  321
  图片展示
 39464  365

立体图片展示

图片随鼠标转向
  图片展示
 29746  445

纯css3放大镜

通过css3样式实现放大镜的效果
  图片展示
 36580  345

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    QQ 0
    2017/6/8 8:35:30
    在哪里找到新的图片源呢? 回复
    O 0
    2017/5/21 15:01:59
    ら┽暗夜瞳? 0
    2016/10/21 15:10:37
    怎么去更改图片内容的啊? 回复
    孤独剑 0
    2016/3/1 18:03:34
    效果不错。以后多逛逛这里
        javasu0
        2016/5/14 9:05:09
        怎么我下载后不能用
    回复
    czhmarco 0
    2015/11/18 16:11:55
    小小啦啦 0
    2015/10/6 5:10:33

    不错,值得关注

    回复
    Nice 0
    2015/5/15 9:58:36
    JQ剑圣 0
    2014/8/7 10:48:00

    这个简直就是神站......太太太好了.....

    回复
    魔界小鸟 0
    2014/6/2 21:36:00

    楼上请说的具体点,哪些看不到?

    回复
    不可不戒 0
    2014/6/2 20:39:00

    有些东西好像看不到。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复