刮刮卡

第一次 ul委派事件 失败的了 所以用循环写的 这次 用ul委派写法 下面js代码 var ul = document . getElementsByTagName ( "ul" ) [ 0 ] ; var li = document . getElementsByTagName ( "li" ) ; var index = 1 ; var map = { } ; //创建一个对象来保存对应li的透明度 for ( var i = 0 ; i < li . length ; i ++ ) { li [ i ] . className = String ( i ) ; //给每个li加个类名 map [ i ] = index ; 用map对象保存每个对应li的透明度 } ul . onmouseover = function ( e ) { var event = e || window . event ; var target = event . target || event . srcElement ; map [ target . className ] -= 0.35 ; //当事件触发的时候 每个对应li的透明度减少 if ( map [ target . className ] < 0 ) { //判断透明度的大小 map [ target . className ]

今天利用js 写了个小刮刮卡 不是那种canvas刮刮卡 很简单 利用 onmouseover事件 逐渐降低 透明度 达到最终能看到最后的图片 上代码 可能有错误 哈哈 我是新手 望指点 我好改改 上面这是css代码 下面这是js代码 var ul = document . getElementsByTagName ( "ul" ) [ 0 ] ; var li = document . getElementsByTagName ( "li" ) ; var index = 1 ; for ( var i = 0 ; i < li . length ; i ++ ) { li [ i ] . onmouseover = function ( ) { // var event = e || window.event; // var target = event.target || event.srcElement; //这里本想用事件委派 给ul添加事件但是最后鼠标划着划着 // 整个ul都不见了 所以没写出来 index = index - 0.05 ; if ( index <= 0 ) { index = 0 ; } this . style . opacity = index ; // event.stopPropagation(); console . log (

用canvas+mouseArea实现的刮刮卡效果。 表层是一层色彩，用手指划开，可看到下面的文字 Lisence: MIT, 请保留本文档说明 Author: surfsky.cnblogs.com 2015-02 【先看效果】 【下载】 http://download.csdn.net/detail/surfsky/8445011 【核心代码】 1 Canvas { 2 id: canvas 3 anchors.fill: parent 4 5 // 6 property bool isFirstPaint : true; 7 property point lastPt; 8 9 // 10 onPaint: { 11 var ctx = getContext('2d'); 12 if (isFirstPaint){ 13 // 首次绘制刮刮层图案 14 ctx.fillStyle = root.maskColor; 15 ctx.fillRect(0, 0, width, height); 16 isFirstPaint = false; 17 } 18 else{ 19 // 去除鼠标位置的图案 20 clearRound(ctx, lastPt, 20); 21 lastPt = Qt.point(area.mouseX, area.mouseY); 22 } 23 }