很多购物网站现在都支持360实物全景图像，可以360度任意选择查看样品，这样 对购买者来说是一个很好的消费体验，用HTML5 Canvas也可以实现类似的功能。 360度全景图的原理： 首先需要对实物拍照，间隔是每张照片旋转15度，所以需要23张照片。 照片准备好了以后，尽量选择JPG格式，裁剪到适当大小。 JAVASCRIPT中预加载所有照片，可以配合进度条显示加载精度 创建/获取Canvas对象，加上鼠标监听事件，当鼠标左右移动时候，适度的绘制不 同帧。大致的原理就是这样，比较简...
原理：在iframe上面覆盖一个DIV，DIV必须有背景色且透明。position为absolute，通过top和left属性控制该DIV的位置使之覆盖于iframe之上。这样iframe就被遮盖住，而里面的任何东西都点不了了。 步骤一： 新建一个文档，命名为A.html，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht...
JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。 而cookie是运行在客户端的，所以可以用JS来设置cookie. 假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取c...
imgCentering 是一款可以让图片在div居中和实现弹出层的图片jQuery插件，可在一组图片中查看前一张和后一张进行切换的图片相册查看效果，且具有不错的动画效果。 使用教程： 1、引用文件： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/imgcentering.js"></script> 2、HTML代码结构： &l...
bxSlider 是一款免费的 jQuery Slider 的插件，它可以实现 内容和图片幻灯片滚动效果，支持响应式，自适应各种尺寸的屏幕，桌面和手机等各种设备都能完美适应。 bxSlider 详细功能 完全响应式：支持所有设备。 支持水平，垂直和淡入淡出等模式。 支持图片，视频和 HTML 内容等幻灯片。 内置支持触摸和滑动等高级操作。 使用 CSS transitions 来实现幻灯片动画（原生硬件加速）。 完整的回调 API 和接口。 ...
jqfancytransitions是一款易于使用的显示照片过渡效果的jQuery幻灯片插件，兼容Safari 2 +、Internet Explorer 6 +、Firefox 2 +、3 + 9 +谷歌浏览器等。 使用方法 调用插件js文件： <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jqFancyTransitions.js" type="text/javascript"></script&g...
如果把 overflow:hidden 用在 body 标签，移动端浏览器依然能滚动，因为移动端是基于touch事件，解决方法有两个。 方法一： 将要隐藏滚动的内容加上一个包裹层div，然后给这个div设置高度为window.height()，并且 overflow:hidden 就可以解决你的问题。 方法二： 给 body 添加 position:fixed; 示例： body { overflow:hidden; position:fixed; left:0; top:0; }
flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果，可以自动播放，是一款移动优先的jQuery幻灯片插件。 安装方法：可以通过Bower或npm来安装： Bower: bower install flickity --save npm: npm install flickity --save 使用方法： 要使用该幻灯片插件首先要在页面中引入 flickity.pkgd.js 和 flickity.css 文件。 <link rel="stylesheet" h...
给可点击的元素添加代码： -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 该属性的作用是：当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。 该属性可以只设置透明度，如果未设置透明度，iOS Safari使用默认的透明度；当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。 ...
为了仿止别人仿制或扒下自己的网页，很多网站选择使用禁止浏览器右键查看元素或F12审查元素，一旦查看元素浏览器页面就会自动关闭，javascript实现代码： <script type="text/javascript"> function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location="about:blank"; //将当前窗口跳转置空白页 } function ck() { console.profile(); console.profileEnd(); //我们判断一下profi...
整合pjax的准备工作 检查你的网站是否引入1.7.0版本以上的jquery.js，如果没有请全局引入 //新浪CDN提速（或以下载到本地引入）： <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 1.7.0版本以上的才有pushState的封装。 开始整合Pjax： 1.下载pjax.js，百度网盘：http://pan.baidu.com/s/1dF9E1w9； ...
瀑布流已经是几乎过时的技术了，不过对于很多想要快速实现它的朋友而言，却绝非易事，因为即使我们已经有很多现成的代码，却发现在自己的开发环境中 无法快速得到自己想要的结果。就像我们现在要介绍的三大利器（masonry+imagesloaded+infinitescroll）即使它们是如此 有效，却在马上要使用的时候让我们拿着如烫手山芋班很难真正达到我们想要的效果。 下面，我们从其原理来讲解它们的使用，以帮助你更好的发挥它的功效。但为了快速实现，我们不讲解它们的全部内容。 1. 合理的HTML布局是问题的基本 <div id="container"&g...