素材牛VIP会员

JS实现图片360度全景展示效果代码

 所属分类:网页特效-图片特效,滑块/旋转/滚动,触屏/拖拽/下拉

 浏览:2866次  评论:2次  更新时间:2016-08-28
牛币素材VIP可免积分下载
JS实现图片360度全景展示效果代码兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:一些商场、卖场网站很需要的效果,值得推荐

详细介绍

使用方法:

载入必要JS文件、CSS样式文件

<script src="images/saved_resource.js"></script>
<link type="text/css" rel="stylesheet" href="images/ox-360.css" />
<script src="images/ox-360.js"></script>

请查看演示或附件,注意引用的位置顺序

HTML部分

<div id="content">
<div class="lv-content">
<div id="J_View360" onselectstart="return false;" style="background-image: url(images/banner01.jpg); background-position: 61.07152001523516px 0px; "></div>
<div class="ox-control">
<div class="direction">
<div class="bg">
</div>
<a class="left" title="往左滚动" id="J_Left">1</a>
<a class="back" title="返回" id="J_Back">2</a>
<a class="right" title="往右滚动" id="J_Right">3</a>
</div>
<div class="views">
<div class="views-bg">
</div>
<div class="views-text"></div>
<div class="views-block" style="width: 30px; left: 82px; ">
</div>
<div class="views-trigger">
<a class="views-1">1</a>
<a class="views-2">2</a>
<a class="views-3">3</a>
<a class="views-4">4</a>
<a class="views-5">5</a>
</div>
</div>
</div>
</div>
<script src="images/ox-360.js"></script>
</div>

讨论这个素材(2)回答他人问题或分享使用心得会奖励牛币

华***n  
2017年11月07日

学习了  感谢分享

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)