某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > js实现3d悬浮效果_javascript技巧_脚本之家

js实现3d悬浮效果_javascript技巧_脚本之家

时间:2019-12-29 06:39

有时候新闻或者消息提示有几条,可以用absolute定位来实现效果。

效果如下:

效果如图:代码如下:

原理是什么呢?

代码如下:

悬浮窗口示例

1.获取数字或者状态。复制代码 代码如下:function getnewscount(){ $time = date("Y-m-d",strtotime; $where["News.checkked = ?"] = array; $where["News.UpdateTime >= ?"] = array("val"=>$time,"type"=>1);//'2014-01-10' $news = $this->dao_news->getNews; return count; }

    *{margin: 0; padding: 0;} ul,li{list-style: none;} .container{perspective: 1300;-webkit-perspective:1300;} .boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;} .boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;} .on li:hover{-webkit-transform: translate3d;transform: translate3d;background:deepskyblue;box-shadow: 30px 30px 10px rgba;} .on{webkit-transform: rotateX rotateZ;transform: rotateX rotateZ;}                   var list=document.querySelector; window.onload=function(){ setInterval } function transition(){ list.className='on boxList'; } 

Try scrolling this window.

function getstatus{ $where["lx_messageto.user_id = ?"] = array("val"=>$user_id , "type"=>1); $where["lx_messageto.status = ?"] = array; $message = $this->dao_message->getMessageTo; return count; }2.前端处理显示。用js处理。复制代码 代码如下:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

这是悬浮窗口