菜单

支持触摸的jQuery响应式幻灯片插件Owl Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,兼容包括 IE6、IE7在内的所有浏览器,需要jquery 1.7 及以上版本。Owl Carousel 提供了众多的参数、回调函数及自定义事件,所以它几乎可以满足你的所有要求。它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适...

通过HTML5 Canvas实现360度全景图

很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买者来说是一个很好的消费体验,用HTML5 Canvas也可以实现类似的功能。 360度全景图的原理: 首先需要对实物拍照,间隔是每张照片旋转15度,所以需要23张照片。 照片准备好了以后,尽量选择JPG格式,裁剪到适当大小。 JAVASCRIPT中预加载所有照片,可以配合进度条显示加载精度 创建/获取Canvas对象,加上鼠标监听事件,当鼠标左右移动时候,适度的绘制不 同帧。大致的原理就是这样,比较简...

通过CSS屏蔽iframe中的超链接

原理:在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...

运用JS设置cookie、读取cookie、删除cookie

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值,那么如何来设置和读取c...

图片居中及弹出层jQuery插件imgcentering

图片居中及弹出层jQuery插件imgcentering

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...

响应式jquery幻灯片插件bxSlider

响应式jquery幻灯片插件bxSlider

bxSlider 是一款免费的 jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,自适应各种尺寸的屏幕,桌面和手机等各种设备都能完美适应。 bxSlider 详细功能 完全响应式:支持所有设备。 支持水平,垂直和淡入淡出等模式。 支持图片,视频和 HTML 内容等幻灯片。 内置支持触摸和滑动等高级操作。 使用 CSS transitions 来实现幻灯片动画(原生硬件加速)。 完整的回调 API 和接口。 ...

jquery特效的图片切换插件:jqFancyTransitions

jquery特效的图片切换插件:jqFancyTransitions

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为什么页面还能滚?禁止方法

在移动端设置overflow:hidden为什么页面还能滚?禁止方法

如果把 overflow:hidden 用在 body 标签,移动端浏览器依然能滚动,因为移动端是基于touch事件,解决方法有两个。 方法一: 将要隐藏滚动的内容加上一个包裹层div,然后给这个div设置高度为window.height(),并且 overflow:hidden 就可以解决你的问题。 方法二: 给 body 添加 position:fixed; 示例: body { overflow:hidden; position:fixed; left:0; top:0; }

jQuery适合移动设备触摸屏的响应式幻灯片插件

jQuery适合移动设备触摸屏的响应式幻灯片插件

flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果,可以自动播放,是一款移动优先的jQuery幻灯片插件。 安装方法:可以通过Bower或npm来安装: Bower: bower install flickity --save npm: npm install flickity --save 使用方法: 要使用该幻灯片插件首先要在页面中引入 flickity.pkgd.js 和 flickity.css 文件。 <link rel="stylesheet" h...

css取消Safari浏览器链接点击颜色变灰-webkit-tap-highlight-color

给可点击的元素添加代码: -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 该属性的作用是:当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。 该属性可以只设置透明度,如果未设置透明度,iOS Safari使用默认的透明度;当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。 ...

禁止浏览器右键查看元素或F12审查元素并关闭页面

为了仿止别人仿制或扒下自己的网页,很多网站选择使用禁止浏览器右键查看元素或F12审查元素,一旦查看元素浏览器页面就会自动关闭,javascript实现代码: <script type="text/javascript"> function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location="about:blank"; //将当前窗口跳转置空白页 } function ck() { console.profile(); console.profileEnd(); //我们判断一下profi...

Pjax局部无刷新技术教程

整合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; ...