jQuery Html5 全景图

  • g5_927985
    了解作者
  • 2.2MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-13 03:55
    上传日期
基于 jQuery 库,通过把图片转换为 HTML5 Canvas 实现的图片全局展示插件。
jQuery-html5-canvas-panorama-plugin-master.zip
  • jQuery-html5-canvas-panorama-plugin-master
  • sample.basic.html
    879B
  • sample.interactive.html
    796B
  • night3.jpeg
    284.9KB
  • ddpanorama.fullscreen.js
    1KB
  • ddpanorama.css
    633B
  • sample.drawlabels.html
    4.8KB
  • sample.loop.html
    858B
  • ddpanorama.min.js
    9KB
  • sample.eventredraw2.html
    3KB
  • sample.dynamicsize.html
    2.2KB
  • ddpanorama.gensample.js
    800B
  • PanoSarek.jpg
    128.1KB
  • sample.eventredraw.html
    1.4KB
  • imagesloaded.pkgd.min.js
    6.7KB
  • sample.basic2.html
    818B
  • sample.size.html
    827B
  • sample.minspeed.html
    599B
  • sample.event.html
    3KB
  • recent_full.jpeg
    1.8MB
  • sample.pos.html
    799B
  • sample.dynamicspeed.html
    1.4KB
  • sample.hugesizeimage.html
    594B
  • jquery.1.7.1.min.js
    91.7KB
  • jquery.ba-outside-events.min.js
    940B
  • README
    6.5KB
  • sample.dynamicinteractive.html
    1.3KB
  • ddpanorama.js
    21.7KB
内容介绍
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="ddpanorama.css" /> <script type="text/javascript" src="jquery.1.7.1.min.js"> </script> <script type="text/javascript" src="jquery.ba-outside-events.min.js"> </script> <script type="text/javascript" src="imagesloaded.pkgd.min.js"> </script> <script type="text/javascript" src="ddpanorama.min.js"> </script> </head> <body> <div id="container" style="position: relative;overflow:hidden"> <div id="linkcontainer" style="position:absolute;left:0px;top:0px;" > <a href="http://google.com" style="position:absolute;left:100px;top:50px;" rel='nofollow' onclick='return false;'> hello1</a> <a href="http://google.com" style="position:absolute;left:150px;top:200px;" rel='nofollow' onclick='return false;'> hello2</a> <a href="http://google.com" style="position:absolute;left:250px;top:150px;" rel='nofollow' onclick='return false;'> hello3</a> <a href="http://google.com" style="position:absolute;left:350px;top:330px;" rel='nofollow' onclick='return false;'> hello4</a> <a href="http://google.com" style="position:absolute;left:470px;top:120px;" rel='nofollow' onclick='return false;'> hello5</a> <a href="http://google.com" style="position:absolute;left:520px;top:210px;" rel='nofollow' onclick='return false;'> hello6</a> <a href="http://google.com" style="position:absolute;left:600px;top:50px;" rel='nofollow' onclick='return false;'> hello7</a> <a href="http://google.com" style="position:absolute;left:750px;top:200px;" rel='nofollow' onclick='return false;'> hello8</a> <a href="http://google.com" style="position:absolute;left:850px;top:150px;" rel='nofollow' onclick='return false;'> hello9</a> <a href="http://google.com" style="position:absolute;left:950px;top:330px;" rel='nofollow' onclick='return false;'> hello10</a> <a href="http://google.com" style="position:absolute;left:1070px;top:120px;" rel='nofollow' onclick='return false;'> hello11</a> <a href="http://google.com" style="position:absolute;left:1150px;top:200px;" rel='nofollow' onclick='return false;'> hello12</a> <a href="http://google.com" style="position:absolute;left:1250px;top:150px;" rel='nofollow' onclick='return false;'> hello13</a> <a href="http://google.com" style="position:absolute;left:1350px;top:330px;" rel='nofollow' onclick='return false;'> hello14</a> <a href="http://google.com" style="position:absolute;left:1470px;top:120px;" rel='nofollow' onclick='return false;'> hello15</a> <a href="http://google.com" style="position:absolute;left:1520px;top:210px;" rel='nofollow' onclick='return false;'> hello16</a> <a href="http://google.com" style="position:absolute;left:1600px;top:50px;" rel='nofollow' onclick='return false;'> hello17</a> <a href="http://google.com" style="position:absolute;left:1750px;top:200px;" rel='nofollow' onclick='return false;'> hello18</a> <a href="http://google.com" style="position:absolute;left:1850px;top:150px;" rel='nofollow' onclick='return false;'> hello19</a> <a href="http://google.com" style="position:absolute;left:1950px;top:330px;" rel='nofollow' onclick='return false;'> hello20</a> <a href="http://google.com" style="position:absolute;left:2070px;top:120px;" rel='nofollow' onclick='return false;'> hello21</a> <a href="http://google.com" style="position:absolute;left:2120px;top:210px;" rel='nofollow' onclick='return false;'> hello22</a> <a href="http://google.com" style="position:absolute;left:2200px;top:50px;" rel='nofollow' onclick='return false;'> hello23</a> <a href="http://google.com" style="position:absolute;left:2350px;top:200px;" rel='nofollow' onclick='return false;'> hello24</a> <a href="http://google.com" style="position:absolute;left:2450px;top:150px;" rel='nofollow' onclick='return false;'> hello25</a> <a href="http://google.com" style="position:absolute;left:2550px;top:330px;" rel='nofollow' onclick='return false;'> hello26</a> <a href="http://google.com" style="position:absolute;left:2670px;top:120px;" rel='nofollow' onclick='return false;'> hello27</a> </div> </div> <div id="output" /> <button onclick="init()">init ddpanorama</button> <script> var panorama = null; function init() { if (panorama != null) return; panorama=jQuery(function(){jQuery("#panotarget").ddpanorama({ratio:9/16})}); panorama.bind("ddinit", function(event){ //this is the tricky part. We need to make a duped one of the labels for the cycled image. //note that we are placing html elements, so it doesn't automatically wrap up for the looped images var src = $("#linkcontainer"); var linkcontainer2 = src.clone(); linkcontainer2.attr("id", "linkcontainer2"); src.after(linkcontainer2); linkcontainer2.css("left", event.width); console.log("ddinit"); }); panorama.bind("ddredraw", function(event){ //do something here to handle redraw event //event.speed contains a speed (px/sec) //event.canvas contains a canvas element //event.loaded contains a boolean flag which indicates whether the image is loaded or not //(I'll add later more compelling examples later) var offsetX = Math.floor(event.scrollX); //its quite efficient because you are just scrolling one parent element, not all of the labels $("#linkcontainer").css("left", offsetX); if (offsetX < 0) { $("#linkcontainer2").css("left", offsetX+event.width); } else { $("#linkcontainer2").css("left", offsetX-event.width); } $("#output").text(offsetX); }); panorama.bind("ddresize", function(event){ jQuery("#container").width($(event.canvas).width()); jQuery("#container").height($(event.canvas).height()); }); } //init() </script> </body> </html>
评论
    相关推荐