发新贴  快速回复

两个很酷毙的效果要求各位大大指教!!。。。。

/yhh_想_/zhh
2013-11-06 15:47
有两个效果一直没搞明白。 具体效果请参照  http://www.narutom.com/  这里网址 动漫连载的两个部分 一个是原地转圈   另一个效果  还有     http://sandbox.runjs.cn/show/85mqzjdv是这个效果   小弟我会一丢丢的JS 和JQ  请尽量的 简洁明了  小弟在此拜谢。     如果另据编程思路就更好了 !!!!
″用眼睛、素描
 本帖最后由 ″用眼睛、素描 于 2013-11-7 13:37 编辑 


 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>判断鼠标进入方向</title>
</head>
<body>
    <style> 
html,body{margin:0;padding:0;} 
#wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;} 
</style>
    <div id="wrap">方向反馈</div>
    <script src="http://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.js"></script>
<script>
var getDirection = function(obj,e){            //传入移入的对象和他的事件对象 返回    /*0, 1, 2, 3*/数字
    obj = $(obj);
    var w = obj.width(); 
    var h = obj.height();
    var pos = obj.position();
    var x = (e.pageX - pos.left - (w / 2)) * (w > h ? (h / w) : 1); 
    var y = (e.pageY - pos.top - (h / 2)) * (h > w ? (w / h) : 1);

    return Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
};

    
var dirName = new Array('上方','右侧','下方','左侧');    /* 0 1 2 3 */

var obj = $('#wrap');
obj.mouseenter(function(e){
    obj.html(dirName[getDirection(obj,e)]+'进入');
});
obj.mouseleave(function(e){
    obj.html(dirName[getDirection(obj,e)]+'离开');
});
</script>
</body>
</html>getDirection方法返回    /*0, 1, 2, 3*/数字对应
var dirName = new Array('上方','右侧','下方','左侧');/* 0 1 2 3 */
上面有注释
2013-11-06 15:47  回复本帖
小七
动用的不过是css3的一个属性  transform: rotateZ(360deg); 图片以360度翻转 
2013-11-06 16:57  回复本帖
小七
第2个就是判断鼠标碰到div的left top 再用animate 大概就是这样
2013-11-06 17:00  回复本帖
/yhh_想_/zhh
小七 发表于 2013-11-6 17:00 forum.php?mod=redirect&goto=findpost&pid=22068&ptid=7325
第2个就是判断鼠标碰到div的left top 再用animate 大概就是这样

有具体的吗 ?????
2013-11-06 19:41  回复本帖
″用眼睛、素描
第一个是css3的东西-webkit-transform:rotate(360deg)
2013-11-07 13:42  回复本帖
/yhh_想_/zhh
″用眼睛、素描 发表于 2013-11-7 13:35 forum.php?mod=redirect&goto=findpost&pid=22111&ptid=7325
getDirection方法返回    /*0, 1, 2, 3*/数字对应
var dirName = new Array('上方','右侧','下方','左侧'); ...

亲  淘宝的KISSY的框架会吗 !!!!! 能否帮助改编一下     先给你分!!
2013-11-07 13:50  回复本帖
″用眼睛、素描
/yhh_想_/zhh 发表于 2013-11-7 13:50 forum.php?mod=redirect&goto=findpost&pid=22113&ptid=7325
亲  淘宝的KISSY的框架会吗 !!!!! 能否帮助改编一下     先给你分!!

亲,这个我没打算去淘宝。。。没用过这个
2013-11-07 13:52  回复本帖
/yhh_想_/zhh
″用眼睛、素描 发表于 2013-11-7 13:52 forum.php?mod=redirect&goto=findpost&pid=22114&ptid=7325
亲,这个我没打算去淘宝。。。没用过这个

我的意思是说!!!现在淘宝推出了一个框架  叫做KISSY      这个是他们的首页 http://docs.kissyui.com/
2013-11-08 09:48  回复本帖
/yhh_想_/zhh
我的问题找到了  在这里共享给大家      第一个  请查询附件     第二个       图片旋转的效果是CSS3  的属性    
 .tshop-um-tpxz .sp{
width:300px; 
background:#ff0000; 
height:300px; 
margin:100px;
-moz-transform: rotate(720deg) scale(1);
-webkit-transform: rotate(720deg) scale(1);
-o-transform: rotate(720deg) scale(1);
transform: rotate(720deg) scale(1);
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;

}
.tshop-um-tpxz .sp:hover{
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}


SP是一个DIV的纯色方框, 但是呢 CSS3  IE9 LEVEL以下的浏览器不兼容!!!!!
2013-11-12 15:32  回复本帖
/yhh_想_/zhh
补充一个PHP文件
2013-11-12 15:33  回复本帖
登录 后才可以发表回复