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

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

通过HTML5 Canvas实现360度全景图

很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买者来说是一个很好的消费体验,用HTML5 Canvas也可以实现类似的功能。 360度全景图的原理: 首先需要对实物拍照,间隔是每张照片旋转15度,所以需要23张照片。 照片准备好了以后,尽量选择JPG格式,裁剪到适当大小。 JAVASCRIPT中预加载所有照片,可以配合进度条显...
Web前端开发 / / 5039次阅读

通过CSS屏蔽iframe中的超链接

原理:在iframe上面覆盖一个DIV,DIV必须有背景色且透明。position为absolute,通过top和left属性控制该DIV的位置使之覆盖于iframe之上。这样iframe就被遮盖住,而里面的任何东西都点不了了。 步骤一: 新建一个文档,命名为A.html,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi...
Web前端开发 / / 5688次阅读

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

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当...
Web前端开发 / / 4080次阅读

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

imgCentering 是一款可以让图片在div居中和实现弹出层的图片jQuery插件,可在一组图片中查看前一张和后一张进行切换的图片相册查看效果,且具有不错的动画效果。 使用教程: 1、引用文件: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></scr...
Web前端开发 / / 4044次阅读
图片居中及弹出层jQuery插件imgcentering

响应式jquery幻灯片插件bxSlider

bxSlider 是一款免费的 jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,自适应各种尺寸的屏幕,桌面和手机等各种设备都能完美适应。 bxSlider 详细功能 完全响应式:支持所有设备。 支持水平,垂直和淡入淡出等模式。 支持图片,视频和 HTML 内容等幻灯片。 内置支持触摸和滑动等...
Web前端开发 / / 7640次阅读
响应式jquery幻灯片插件bxSlider

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

jqfancytransitions是一款易于使用的显示照片过渡效果的jQuery幻灯片插件,兼容Safari 2 +、Internet Explorer 6 +、Firefox 2 +、3 + 9 +谷歌浏览器等。 使用方法 调用插件js文件: <script src="js/jquery.js" type="text/javascript"></script> &...
Web前端开发 / / 3791次阅读
jquery特效的图片切换插件:jqFancyTransitions

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

如果把 overflow:hidden 用在 body 标签,移动端浏览器依然能滚动,因为移动端是基于touch事件,解决方法有两个。 方法一: 将要隐藏滚动的内容加上一个包裹层div,然后给这个div设置高度为window.height(),并且 overflow:hidden 就可以解决你的问题。 方法二: 给 body 添加 position:fixed; 示例:...
Web前端开发 / / 6158次阅读
在移动端设置overflow:hidden为什么页面还能滚?禁止方法

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

flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果,可以自动播放,是一款移动优先的jQuery幻灯片插件。 安装方法:可以通过Bower或npm来安装: Bower: bower install flickity --save npm: npm install flickity --save 使用方法: 要使用该幻...
Web前端开发 / / 5342次阅读
jQuery适合移动设备触摸屏的响应式幻灯片插件

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

给可点击的元素添加代码: -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 该属性的作用是:当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。...
Web前端开发 / / 6942次阅读

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

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

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的...
Web前端开发 / / 4598次阅读