css3 Animation： 代码如下: @-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/} }Jquery ： 代码如下:$(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画也可以在css样式里添加如下： 代码如下: #element{-webkit-animation: twinkling 1s infinite ease-in-out; }注：...
要判断这个 CSS 文件是否加载完毕，各个浏览器的做法差异比较大，这次要说IE浏览器做的不错，我们可以直接通过onload方法来处理CSS加载完成以后的处理： 代码如下:// 代码节选至seajsfunction styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent(onload, callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // t...
今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。 功能 : 在上方的按钮上滑动，可以切换各个page,点击下方的各个page，也可以切换收缩还是展开状态。 初始效果预览 代码如下: CSS+jQuery动画效果 body{ z-index: 0; width: 100%; min-height: 400px; } .pages{ position: absolute; } ....
1、动态加载js，css文件(用原生js和jquery) iframe结构： frame0(父) frame2（子） frame3（子） frame2中触发事件，动态的向frame3中 加载js、css文件和 dom元素？ *同级之间可以调用，可以 通过 子-父-子 的方式调用同级 parent.parentFram(“这个方法在调用其他子farme”); 1.jquery的append() 代码如下: 速度快，同步（需要引入jquery） var oBody = document.getElementById("frame3_id").contentWindow.$("body"); var str ...
想大家都做过遮罩层这种常见的功能，css或jquery实现，实现方式多样化，这里http://我介绍我在项目中实现的方式，全屏遮罩，部分区域可操作，非常实用。 效果如下图： js 实现部分： 代码如下: var myAlert = document.getElementById("alert"); var reg = document.getElementById("content").getElementsByTagName("a")[0]; reg.onclick = function() { myAlert.style.background = "#e2ecf5"; myAlert.style.zIndex = "501";...
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然我的回答是可以的。具体可以这样做： 1、用JS定义一个图片数组，里面存放你想要随机展示的图片 代码如下: var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", "http://www.baidu.com/img/baidu_sylogo1.gif", "http://www.open-open.com/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.open-open.com/news...
1、用JS定义一个图片数组，里面存放你想要随机展示的图片代码如下:ar imgArr=["http://www.gxlcms.com/logo_cn.png","http://www.gxlcms.com/baidu_sylogo1.gif","http://www.gxlcms.com/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.gxlcms.com/news/uploadImg/20120111/20120111081906_76.jpg"];上面的图片请大家换成自己的。 2、用JS产生一个随机数，当然这个随机数从0开始到imgArr.length-1结束代码如下:var ...
今天学习了一下QQ邮箱的网页整体缩放效果，原来实现方法很简单，代码如下： 代码如下: 测试页面 div { width: 600px; text-align: center; font-size: 4em; color: #333; } $(function() { var r = document.body.offsetWidth / window.screen.availWidth; $(document.body).css("-webkit-transform","scale(" + r + ")"); }); $(window).resize(function() { var r = document.body.offsetWidth / window.screen.availW...
// 网上参考的，自己修改了一部分 // 代码如下，纯JS，要求浏览器支持 getElementsByClassName 方法 代码如下: function getElementsByClassName(classname,node){ node = node || window.document; if(node.getElementsByClassName){ return node.getElementsByClassName(classname); }else{ var results = new Array(); var elems = node.getElementsByTag("*"); for (var i=0;iif(elems[i].className.indexOf(classname) != -...
该方法支持IE浏览器和其他浏览器。 1、首先定义两个link，当然你也可以是一个，第二个是要更改的css 代码如下:2、下面的JavaScript代码将根据不同的浏览器大小，更改css 代码如下:function adjustStyle(width) { width = parseInt(width); if (width < 701) { $("#css").attr("href", "css/narrow.css"); } else if ((width >= 701) && (width < 900)) { $("#css").attr("href", "css/medium.css"); ...
说起“渐变色”，你会想起什么？ 当我开始搜索查找这个名词的时候，才发现它实际上是有两种理解或者说是两种形式的：动态渐变和静态渐变。 所谓动态渐变，举个简单的例子：他来了，她的脸渐渐红了...渐渐的，渐渐改变的，是不断在改变的；而静态渐变，也就更简单了：天上一到彩虹，赤橙黄绿青蓝紫啊...在当前展示的成品中，颜色从一部分到另一部分的颜色是不一样的，可能幅度比较小，是逐渐改变的，但有一点是至关重要的，它已经存...
如图所示。 该图片切换特效实现很简单，而且兼容性很好。 html页面如下 代码如下:
我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用jquery很容易实现。 效果图： show you code: 代码如下: jquery test white red green yellow $("button").click( function() { var color = this.value; $("body").css("background-color",color); } ) 我们先根据元素名选择我们要操作的对象：button，然后使用click方法找到被点击的按钮，然后在触发的事件中获取该按钮...
今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后，内容页面向内移动显示菜单项。当单击关闭菜单按钮时，菜单项隐藏，内容页恢复原位。看下图源码下载 我们看下实现代码： html代码：WIFEO/CODEPost hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum ...
现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案。 1.我们通过 事件代理(event delegation) 让事件监听更高效, 2.我们利用 函数降频技术(function debouncing) 来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译) 3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等。 还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加...