Jump to content
新域网络技术论坛

Search the Community

Showing results for tags 'js'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 论坛服务
    • 公告栏
    • ZW微擎模块技术支持
  • 技术讨论
    • IPB相关讨论
    • PHP技术探讨
    • FREEBSD讨论
    • 其它技术
    • 软件分享
  • 业余无线电
    • 使用指南
    • 设备讨论

Blogs

There are no results to display.

Product Groups

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


位置


兴趣


呼号

Found 3 results

  1. webp是Google 2010年推出的新图像格式,到目前为止也只有Google自己支持。它的优势也非常明显。 目前只有一半左右的浏览器支持,我们想使用这个图片格式还是得费一番功夫,首先判断浏览器是否支持这个格式,如果支持直接使用webp,如果不支持使用传统的图片格式。 判断方式有两种方式: 一、通过浏览器请求头进行判断,Accept 中是否包含 image/webp ,如果包含就是支持,否则就是不支持,这里切换文件也相对比较方便,即使客户端关闭JS也不会有影响,推荐使用此模式进行处理。 二、用JS进行前端判断,然后前端用js切换图片。 alert(support.webp2);即可 /** * 检测浏览器是否支持webp格式(异步方式) * @param callback */ var support = {}; checkWebpAsync = function(callback) { if (support.webp2 === undefined) { var img = new Image(); var tid = setTimeout(function(){ support.webp2 = false; callback && callback(support.webp2,true); img.onload = img.onerror = null; img = null; },500); img.onload = img.onerror = function() { clearTimeout(tid); support.webp2 = img.width === 2 && img.height === 2; callback && callback(support.webp2,false); }; img.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/oPP8bA//LwYAAA"; }else{ callback && callback(support.webp2); } } checkWebpAsync();
  2. 近期项目上需要使用到画线功能。花了差不多一整天的时间把功能实现并应用到项目上。方案完全使用数学方法,不会消耗太多的资源。思路:点击开始画线功能,弹出透明蒙板层,以避免点击到其它元素上,抓取两次鼠标点击事件,根据鼠标点击位置画出一个矩形透明DIV,将起始两点计算出各点的位置,画出具体的点,以达到画线的效果。 看代码:特记录一下,备忘。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Draw Line</title> <style> #droppalbe { position: relative; width: 500px; height: 400px; background: yellow; } #droppalbe div[id^=yz_] { position: absolute; z-index: 100; /*background: #EEE;*/ } #droppalbe div.pointer { z-index:101; width: 3px; height: 3px; } #droppalbe div#linemask { position: absolute; top: 0; left: 0; z-index:101; background: transparent; width: 100%; height: 100%; } </style> <script type="text/javascript" src="/jq/jquery-1.12.4.min.js"></script> <script> var isdraw = false; var clickcount = 0; var pos = []; $(function(){ $('#droppalbe').bind('click',function(e){ if (isdraw) { var x=e.pageX,y=e.pageY; var px = $(this).offset().left; var py = $(this).offset().top; x = x - px; y = y - py; clickcount ++ ; var tmp = {'x':x,'y':y}; pos.push(tmp); $('#offset').html('X:'+x+',Y:'+y); if (clickcount>=2) { addLineDiv(); init(); } } }); $('#draw').bind('click',function(){ $('#linemask').show(); $('#linemask').css('cursor','crosshair'); isdraw = true; clickcount = 0; pos = []; }); $('#clear').bind('click',function(){ $('div.line').each(function(i){ $(this).remove(); }); }); }); function init() { isdraw = false; clickcount = 0; pos = []; $('#linemask').css('cursor','default'); $('#linemask').hide(); } function addLineDiv() { if (pos.length==2) { AddLine(pos,0,0,false); } } function AddLine(pobj,tp,fm,add,lock,show) { var id = 0; if (fm == undefined) fm = 1; if (show == undefined) show = 0; $('div[id^="yz_tmp_"]').each(function(){ id++; }); if (lock == undefined) { lock = false; }else{ if (lock) { lock = true; }else{ lock = false; } } var sl=st=sw=sh=''; var x1 = pobj[0].x; var y1 = pobj[0].y; var x2 = pobj[1].x; var y2 = pobj[1].y; var pa = ' pa="'+x1+'|'+y1+'|'+x2+'|'+y2+'"'; var l = x1<x2?x1:x2; var t = y1<y2?y1:y2; var el = x1>x2?x1:x2; var et = y1>y2?y1:y2; var w = el - l; var h = et - t; var otype; if (((l == x1) && (t == y1))||((l == x2) && (t == y2))) { otype = 0; //左上角至右下角 }else{ otype = 1; //左上角至右上角 } if (l>0) { sl = "left:"+l+'px;'; } if (t>0) { if (show) if ($('#LayerX').attr('id')) t = t - 86; st = "top:"+t+'px;'; } sw = "width:"+w.toString()+"px;"; sh = "height:"+h.toString()+"px;"; var pd = ' otype="'+otype+'"'; if (lock) { var tmp = $('<div class="lock line" style="'+sl+st+sw+sh+'" fm="'+fm+'"'+pd+'></div>'); }else{ var tmp = $('<div id="yz_tmp_'+id+'" class="line" style="'+sl+st+sw+sh+'" fm="'+fm+'"'+pd+pa+'></div>'); } if (add == undefined || add == '') { $('#droppalbe').append(tmp); }else{ $('#droppalbe-'+add).append(tmp); } eachLine(); //$('div[id^="yz_tmp_"]').draggable(); } function eachLine() { $('div.line').each(function(i){ if ($(this).html().length == 0) { GernelLine(this); } }); } function GernelLine(obj) { var type = $(obj).attr('otype'); var w = $(obj).width(); var h = $(obj).height(); var x1,y1,x2,y2; if (type == '0') { x1 = 0; y1 = 0; x2 = w; y2 = h; }else{ x1 = 0; y1 = h; x2 = w; y2 = 0; } var dx = Math.abs(x2 - x1); var dy = Math.abs(y2 - y1); //var d = Math.pow((dx*dx)+(dy*dy),0.5); if (dy>dx) { for(var i = 0;i<dy;i++) { var width = dx/dy*i; var nl = x1+width; if (y1<y2) { var nt = i + y1; }else{ var nt = y1 - i; } addPointer(obj,nl,nt); } }else{ for(var i = 0;i<dx;i++) { var height = dy/dx*i; var nl = i+x1; if (y1<y2) { var nt = height + y1; }else{ var nt = y1 - height; } addPointer(obj,nl,nt); } } } function addPointer(obj,nl,nt) { $(obj).append('<div class="pointer" style="background:red;position:absolute;left:'+nl+'px;top:'+nt+'px;"></div>'); } </script> </head> <body> <div id="droppalbe"> <div id="linemask" style="display:none;"></div> <div><input type="text" value='input test'> <input type="text" value='input test'> <input type="text" value='input test'> <input type="text" value='input test'> <input type="text" value='input test'> <input type="text" value='input test'></div> <div style="width: 50%;height: 50%">测试内容</div> </div> <button id='draw'>画线</button> <button id='clear'>清线</button> <div id='offset'></div> </body> </html>
  3. 最近项目上使用到requirejs,之前一直用jquery在js中处理,拿它进行简单测试一下,特此记录。相关文件请自行下载,均为官方标准库。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="js/jquery-ui-1.12.0/jquery-ui.min.css"> <title>RequireJs Test</title> <script type="text/javascript" src="js/require.js"></script> <script> requirejs.config({ baseUrl: 'js', paths: { // the left side is the module ID, // the right side is the path to // the jQuery file, relative to baseUrl. // Also, the path should NOT include // the '.js' file extension. This example // is using jQuery 1.9.0 located at // js/lib/jquery-1.9.0.js, relative to // the HTML page. 'jquery': 'jquery-1.12.4.min', 'jquery-ui': 'jquery-ui-1.12.0/jquery-ui.min', }, shim: { 'jquery-ui': ['jquery'], } }); /* //方式一:直接在脚本中调用jQuery和jquery-ui requirejs(['jquery','jquery-ui'],function($) { $(function(){ $('#test').text('Hello World!'); $('#date').datepicker(); }); });*/ //方式二,先封装,然后再调用封装 define("test",['jquery','jquery-ui'],function($,ui){ return { init: function() { $('#test').text('Hello World2!'); $('#date').datepicker(); }, } }); requirejs(['test'],function(t){ t.init(); }); </script> </head> <body> <div id='test'> 1234567890 </div> <input id='date' type="text" value=""> </body> </html>
×
×
  • Create New...