SimpleModal是一款提供功能强大的弹出模拟对话框jQuery插件，也就是一款jquery弹窗插件，该插件使用简单，操作容易，窗体API定义丰富。 插件官方页面：http://www.ericmmartin.com/projects/simplemodal/ 插件演示地址：http://www.ericmmartin.com/projects/simplemodal-demos/ 插件下载页面：http://code.google.com/p/simplemodal/downloads/list 使用教程： 插件提...
大家可能在网上看过很多关于矢量图标制作的教程，而且大多是技术同学分享的技术贴。整个过程也相对比较简单。在这里我们将深入地向大家讲述字体图标制作的 规范流程和注意事项，很多内容是现在网上没有的，纯粹是阿里妈妈MUX这两年摸索出来的。阿里妈妈MUX在国内首家推出了在线生成字体图标平台，省去了设计师不太擅长的字体制作过程，所以在本教程中我们就不再详细介绍如何使用字体制作工具制作字体图标的过程，更多的是介绍如何在AI工具中制作一个规范的字体图标。 一、制作前基础知识普及 1、在制作图标前请下载由阿里妈妈MUX提供的矢量图标制作模板； 网盘下载：http://...
FontAwesome经历了两年的进化，如今已成为不少工具性应用开发者的首选。但FontAwesome的图标毕竟有限，在某些特定的情景 中，FontAwesome的字体并不能准确地传达合适的意义。为自己的Web App定制icon-font字体在某些时候就变成了一种需要。 因为想为公司的产品定制一套icon-font，把曾经那些不易改变不易调校大小颜色的图片改成图标字体，经过搜索和试用，发现icon-font大致有四类制作方法。这四类方法的图标生成原理是一样的。 主要步骤： 步骤一：使用矢量图形编辑器设计图标，画布最好设为512px*512px。以A...
CSS属性值是逐渐改变的，这样就可以创建动画效果。因此只有数字值可创建动画，比如margin:30px 而字符串值无法创建动画，比如background-color:red 要实现animate滚动到页面指定id的位置，就要获取ID的数字值，也就是距离顶部的距离，再通过animate的scrollTop滚动 $(document).ready(function($){ $('#comt').click(function(){ $('html,body').animate({scrollTop:$('#comments').offset().top}, 80...
window.open是javascript函数，该函数的作用是打开一个新窗口或这改变原来的窗口，不过一般用来的是打开新窗口，因为修改原来的网页地址，可以使用window.location，可以重定向网页地址，使网页跳转到另一个页面。 但是一般情况下，如果直接在js中调用window.open()函数去打开一个新窗口，浏览器会对弹出的窗口进行拦截，因为浏览器会把该窗口认为是弹出广告等用户不想得到的窗体，如果不想让浏览器拦截，解决的方法是把window.open()函数改为由用户主动点击时触发，这样浏览器就认为是用户想访问这个页面，而不是直接弹出给用户。 所以常用的...
通过jquery的resize()函数给网页添加随窗口变化的动态效果，在IE8中测试发现resize()函数外的其它动态效果会重复执行两次，百度发现，在IE6、IE7、IE8浏览器下，jquery resize()函数会执行多次，分别是IE7 触发3次，IE8 触发2次，IE9 触发1次，解决方法是添加老外针对该问题制作的一个jquery插件即可。 插件页面：http://benalman.com/projects/jquery-resize-plugin/ （大小1.0k） 下载后，添加在jquery.js引用文件下面即可解决问题。
代码如下： /* 将具有 autoheight 属性的 div 元素设置为自动高度 用法：给需要的 div 元素添加 autoheight 属性，如：<div autoheight> ... </div> 可以修改选择符，如写为 ".autoheight" 或是其它的以匹配需要的元素。 */ $(function () { var _jahDivs = $("div[autoheight]"); if (_jahDivs.length > 0) { _jahDivs.css("overflow",...
例子 CSS代码： .div1{height:100%;margin:0 auto;border-left:5px solid #F00;border-right:5px solid #F00;} jQuery代码： $(function(){ $(".div1").css({ height:$(window).height() }); $(window).resize(function(){ $(".div1").stop(true,false).animate({ ...
document.open() 打开一个新的空白文档，在IE下，open有两个默认参数，相当于 document.open("text/html",'"")，第二个参数只有一个值可选：replace，如果启用了该值，则新建的文档会覆盖当前页 面的文档（相当于清空了原文档里的所有元素，且不能后退即，浏览器的后退按钮不可用）； 例子： <SCRIPT type="text/javascript"> <!-- function test(){ document.open("text/html","replace"); ...
使用HTML5画布，图像可以被巧妙的转换为灰色，而不必使用图像编辑软件。下面的示例将展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。 贡献者：感谢达西·克拉克 贡献jQuery和Javascript代码。 效果演示：http://webdesignerwall.com/demo/html5-grayscale/ 目的 这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前，实现这个效果需要两幅图像，彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效，因为灰...
常用的网页社区分享代码： 分享到twitter的代码 <a href="http://twitter.com/home?status=https://www.tddx.net/ 资源分享" title="分享到 Twitter" target="_blank" rel="nofollow">Twitter</a> 分享到Facebook的代码 <a href="http://www.facebook.com/sharer.php?u=https://www.tddx.net/&t=资源分享" target="blan...
原理比较简单：将要滚动显示的区域的CSS的override设为hidden，宽度设成一个比较大的值，如4000px,然后每次点击上一页或下一页的 按钮时，计算当前页数，如果已经到了最后一页，则回到第一页，滚动是通过控制div的left属性实现的，需要两个div，外面的div的 position设为retative，里面的DIV的position设为absolute。 HTML代码： <div id="product"> <h2><span class="arrow">arrow</span>产品展...