angularJS与bootstrap结合实现动态加载弹出提示内容

2017年02月06日 12 阅读

angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover。 http://v...

jQuery实现带渐显效果的人物多级关系图代码

2017年02月06日 11 阅读

本文实例讲述了jQuery实现带渐显效果的人物多级关系图。分享给大家供大家参考。具体如下：这里演示jQuery实现带渐显效果的人物多级关系图，setQuestPose:function中的n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度，测试时请注意，如果右下角提示有错误，请重新刷新页面即可。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/jquery-...

基于AngularJS实现页面滚动到底自动加载数据的功能

2017年02月06日 11 阅读

要实现这个功能，可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现。步骤如下：1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.02. 如果你是用的jQuery2.0以上版本，还需要修改ng-infinite-scroll.js程序，将所有的将所有的$window.xxx改为$（wind...

javascript实现3D切换焦点图

2017年02月06日 11 阅读

做了一个用鼠标拖拽配合 CSS3 的小尝试，截图如下：熟悉拖拽效果的朋友应该不会陌生鼠标按住以后，左右拖动的实现方式。这个小demo里尝试的是把CSS3中的相关知识点运用到图片展示中，当拖动图片时，显示出立体的感觉～～直接代码如下：#list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;}#list li{height:40px;width...

JS实现可自定义大小，可双击关闭的弹出层效果

2017年02月06日 11 阅读

本文实例讲述了JS实现可自定义大小，可双击关闭的弹出层效果。分享给大家供大家参考。具体如下：这是一款JS弹出层，可自定义大小，双击关闭层，可以弹出500,300、500,500大小的窗口，窗口弹出后，在弹出窗口内双击即可关闭鼠标。我觉得挺不错的效果，可以学习到不少的JS知识。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/js-define-close-able-alert-dlg-demo/具体代码如下：&l...

纯JavaScript代码实现移动设备绘图解锁

2017年02月06日 11 阅读

移动手机设备上有一个屏幕解锁的应用相信大家都不陌生，在移动设备上，用户可以通过设置锁定图案作为密码对设备用户界面进行锁定，锁定界面如下图所示。效果图如下所示JavaScript Code<script>$（"#gesturepwd"）.GesturePasswd（{ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF",//主要的控件颜色 roundRadii:50,//大圆点的半径 pointRad...

两款JS脚本判断手机浏览器类型跳转WAP手机网站

2017年02月06日 11 阅读

随着移动设备的普及，企业的网络宣传已经不能局限在PC端，而需要同时在移动端有所建树。对于公司网站来说，以前都是做的PC端的，当然手机等移动端也可以访问，但是用户体验肯定不如完全适合的手机端来的方便。我们在给自己的网站做了WAP手机网站之后，如果有用户通过手机访问我们的企业顶级域名网站，那就判断跳转到专为的WAP网站。这里老左整理到目前自己在使用的2种JS脚本，因为之前一直有朋友跟我要，所以这里分享出来。第一种：直接JS脚本<script type="...

jQuery实现简易的天天爱消除小游戏

2017年02月06日 11 阅读

今天分享一枚小demo：《天天爱消除游戏》，我想大家对这个游戏不陌生吧！？近期挺火的一款手游妙味的讲师也很喜欢玩这款游戏 ，课余时间就写了个简易版天天的爱消除，除了PC端以外，试试在iPad、iPhone上玩吧~涉及知识点：JS、HTML5;游戏截图：CSS:*{ margin:0; padding:0;}#ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidd...

解决JS请求服务器gbk文件乱码的问题

2017年02月06日 12 阅读

JS获取服务器编码格式为gb2312的文件时内容为乱码，ajax网络请求内部使用的是XMLHttpRequest，所以在请求之前需要设置一下编码格式，但是设置xhr.setRequestHeader（"accept", "text/csv;charset=gb2312,*/*"）;没有效果，只有设置xhr.overrideMimeType（"text/csv;charset=gb2312"）;才正确，代码如下：<span style="font-si...

JS实现仿腾讯微博无刷新删除微博效果代码

2017年02月06日 11 阅读

本文实例讲述了JS实现仿腾讯微博无刷新删除微博效果代码。分享给大家供大家参考。具体如下：这里演示JS仿腾讯微博无刷新删除效果，将显示在微博列表里的内容删除，运用AJAX技术，无刷新删除微博的内容，参考性强，希望对初学AJAX的朋友有所帮助。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/js-f-sina-web-ajax-del-info-demo/具体代码如下：<！DOCTYPE html PUBLI...

JS模拟Dialog弹出浮动框效果代码

2017年02月06日 11 阅读

本文实例讲述了JS模拟Dialog弹出浮动框效果代码。分享给大家供大家参考。具体如下：这里演示JS模拟Dialog弹出浮动框，蓝色经典风格，可以创建一个新层，可设置弹出层的标题和内容，用它可实现一个登录框，或用在后台管理中。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/js-mn-dialog-float-dlg-style-demo/具体代码如下：<！DOCTYPE html PUBLIC "-//W...

js实现新浪微博首页效果

2017年02月06日 11 阅读

我们先来看下效果图CSS* { padding: 0; margin: 0; }li { list-style: none; }body { background: #eee; }#t_sina { width: 390px; padding: 10px; background: #fff; margin: 50px auto 0; font-size: 12px; border: 1px solid #ccc; }#t_sina h2 { padding...

JavaScript各类型的关系图解

2017年02月06日 11 阅读

内置（Build-in）对象与原生（Naitve）对象的区别在于：前者总是在引擎初始化阶段就被创建好的对象，是后者的一个子集；而后者包括了一些在运行过程中动态创建的对象。此外，补充一下图中用到的概念：1、内置（Build-in）对象与原生（Naitve）对象的区别在于：前者总是在引擎初始化阶段就被创建好的对象，是后者的一个子集；而后者包括了一些在运行过程中动态创建的对象。2、引擎扩展对象是一个并不太大的集合，一般来说比较确定，它们也属于引擎的原生对象（但不...

js如何打印object对象

2017年02月06日 12 阅读

js调试中经常会碰到输出的内容是对象而无法打印的时候，光靠alert只能打印出object标示，却不能打印出来里面的内容，甚是不方便，于是各方面整理总结了如下一个函数，能够将数组或者对象这类的结果一一打印出来，具体代码如下：function writeObj（obj）{var description = "";for（var i in obj）{ var property=obj[i]; description+=i+" = "+property+" ";...

jQuery实现商品活动倒计时

2017年02月06日 11 阅读

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛，如考试系统倒计时，团购网站中的优惠活动倒计时等等。今天，我们来使用jQuery实现一个简单的倒计时功能。本文以团购网站的倒计时为背景，我们知道，网站会给每个优惠活动（商品）定一个结束时间，也就是到期时间，但系统时间到达了结束时间，就意味着活动结束。因此，我们在HTML中就要定义活动的结束时间。HTML<ul class="prolist"><li>...

js生成随机数的方法实例

2017年02月06日 13 阅读

js生成随机数主要用到了内置的Math对象的random（）方法。用法如：Math.random（）。它返回的是一个 0 ~ 1 之间的随机数。有了这么一个方法，那生成任意随机数就好理解了。比如实际中我们可能会有如下的需要：（1）生成一个 0 - 100 之间的随机整数，那么则可以：parseInt（100*Math.random（））; 注意：因为Math.random（）的返回值是包括0和1的，所以这里是有生成0和100的可能性的。（2）生成一个从 m...

基于jquery实现复选框全选，反选，全不选等功能

2017年02月06日 13 阅读

jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）：<input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" val...

jquery判断复选框是否被选中的方法

2017年02月06日 11 阅读

jquery 判断复选框是否选中以及如何选中的问题做一下总结。进入正题，还是当页面有如下一组复选框的时候：<input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" value="banana" ...

javascript判断复选框是否选中的方法

2017年02月06日 12 阅读

之前总结了一下关于jquery如何判断复选框是否选中的问题，今天总结如何判断js复选框是否选中javascript判断复选框是否选中，下面通过例子来说明（现在有如下的一组复选框）：<input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="c...

基于jQuery实现的菜单切换效果

2017年02月06日 11 阅读

这是一个非常流畅的菜单展示效果，应用在亚马逊上，当你上下移动鼠标的时候，二级菜单会非常轻快的切换，没有任何延时，给用户如滑丝般的感觉。这种效果借助于一款jQuery插件menu-aim，本文将结合实例讲解如何实现速度超快的菜单效果。HTML首先建立主菜单，我们借用电商网站常见的商品分类。其html结构代码如下，其中我们用到了html5的data-submenu-id属性设置，这在插件调用时非常有用。<div class="active"> &l...