第一步，把网页保存为Canvas画布，借助于html2canvas库，http://html2canvas.hertzen.com/html2canvas(document.getElementById("id1"), { onrendered: function(canvas) { document.getElementById("id2").appendChild(canvas);//生成画布后如何处理，当然可以在新标签打开，在浮层展示等等 }, canvas_id: 'canvas'//通过修改html2canvas源码添加canvas的id });Note:html2canvas()第一个参数为要生成canvas的区域，如果整个网...
div假分页原理：填充后div的总高度 （1000px） 显示高度（100px） 则页面总数为10页 。当查看第二页时，显示的div高度为100 - 200之间，以此类推 看见页面在翻页 实则为div滚动条移动。显示数据集合#applications { /* width:500px;调整显示区的宽*/ height: 1592px; /*调整显示区的高*/ font-size: 14px; margin-top:23px; line-height: 20px; overflow-pageindex: hidden; overflow-y: hidden; word-break: break-all; ...
jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销，而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程，这个时候，我也用这个简单的纯实现了。任务是从一个HTML表使用一些时髦的效果，只要按一下该行的行。以下是实现这一目标的jQuery代码。$(document).ready(function() { $("#sample tr").click(function() { //change the background color to red bef...
jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销，而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程，这个时候，我也用这个简单的纯实现了。任务是从一个HTML表使用一些时髦的效果，只要按一下该行的行。以下是实现这一目标的jQuery代码。$(document).ready(function() { $("#sample tr").click(function() { //change the background color to red bef...
你一定知道 HTML5新增的 placeholder 属性吧？不知道的也没关系。输入框有默认文本是，常需要这样一个效果，点击让默认文本消失，失去焦点后让默认文本显示。 今天分享一段jQuery代码，模拟 placeholder 效果。 Javascript代码：代码如下: function placeHolder(event){var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();if(selfDataValue){event.type == "click" ? (selfValue == selfDataVa...
代码如下:.d_b{height: 20px;width: 10px;display: inline-block;background-color: black;position: relative;vertical-align: middle;top: -15px;left: -5px; }var $dom = $(document); $dom.on('mousedown','#d',function (argument) {$(this).data('mouse','down');console.log('down'); }) $dom.on('mouseup',function(){$('#d').data('mouse','up');console.log('up'); }); $dom.on('mousemove','#d',function(event){if($(t...
渐入弹窗，背景变色不可点击。查看效果：http://runjs.cn/detail/t08gmoijpopup#popup{position: absolute;display:none; z-index:3000; background-color:#FFF; left: 601px; top: 217px; height: 150px; width: 217px;line-height:94px;text-align:center;border: 1px solid #03F; } #embedding{position: absolute; background-color: #36F; top: 94px;height:56px; width:217px;line-height:56px;text-align:center; } a{text-...
本文实例讲述了JavaScript实现将xml转换成html table表格的方法。分享给大家供大家参考。具体如下：function ConvertToTable(targetNode) {// if the targetNode is xmlNode this line must be removed// i couldnt find a way to parse xml string to xml node// so i parse xml string to xml documenttargetNode = targetNode.childNodes[0];// first we need to create headersvar columnCount = targetNode.childNodes[0].chi...
BS架构的企业级应用中，当一个表格列数较多时，用户一个常见的需求就是把前面几个重要的列固定住，这样拖动滚动条时固定的列会方便用户查看数据，用户体验很好。一些重量级的JS组件库也都有这个功能，那么有没有更简单的方法实现这个功能呢？ 这个需求常见的解决方案是使用表格拼接的方法，这个方案如果要制作静态的网页，或者功能简单的动态页面，逻辑比较简单，技术上也不复杂，很容易实现，但是如果要做成组件，动态功能较多的话...
如今网站开发越来越提倡用户体验，为用户提供便利的工具也越来越多，而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制，例如文字的颜色、字体大小等；而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多，但是真正好用的并不多，所以它们改进工作也一直在进行中。 如今网上多数的编辑器都有很强大的功能，相对而言，在使用中也需要很多的配置，当然...
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法。分享给大家供大家参考。具体如下： html部分：css部分：body{ margin: 0px; padding: 0px; } ul{ margin: 0px; padding: 0px; } li{ list-style: none; } .play{ width: 600px; height: 550px; left: 30px; top: 20px; position: relative; border: 2px solid black; } .big_pic{ width: 600px; height: 400px; position: relative; background: snow; overflow: ...
效果：代码很简单 jsdefine("html5_video_player", [ '../avalon-min'], function(avalon) {function formatTime(seconds) {var seconds = Math.round(seconds);var minutes = Math.floor(seconds / 60);seconds = Math.floor(seconds % 60);minutes = (minutes >= 10) minutes : "0" + minutes;seconds = (seconds >= 10) seconds : "0" + seconds;return minutes + ":" + seconds;}var playing=false,mute=false,vol=50,fs=fal...
本文实例讲述了jQuery实现html表格动态添加新行的方法。分享给大家供大家参考。具体实现方法如下：Add Row example$(document).ready(function () { // Code between here will only run when the document is ready$("a[name=addRow]").click(function() {// Code between here will only run //when the a link is clicked and has a name of addRow$("table#myTable tr:last").after('Row 4');return false;}); });Row 1 Row 2...
手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。 注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知识。HTML我页面中默认展示产品信息（某品牌连衣裙产品图片和文字说明），当然实际应用中可以从数据库中获取产品信息。使劲晃动您的手机 灰色 然后在页面中加载jQuery库文件，同时...
HTML5有一个重要特性：DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，它使我们能够很容易的实现重力感应、指南针等有趣的功能。本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。 DeviceOrientation包括两个事件： 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。 2、deviceMotion：封装了运动传感器数据的...