求一个JS——打开页面和刷新一面都执行一次图标的翻转

JavaScript013

求一个JS——打开页面和刷新一面都执行一次图标的翻转,第1张

图标翻转你会做吧~不会我也不会给你写出来的~！哇哈哈哈……翻转的话自己去百度吧，跟你说一下JS的触发事件吧~

其实很简单，刷新和打开其实都是用了一个触发事件，那就是onload事件，就是加载完成后要执行的函数，你把图标的翻转效果封装成一个函数，然后onload=这个函数就可以了~

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        div{

            border: solid red 1px

        }

        #mdiv{

            width: 171px

            height: 134px

            line-height: 134px

            background: url("6.jpg") no-repeat

            text-align: center

        }

        #mspan{

            display: none

        }

    </style>

</head>

<body>

<div id="mdiv"><span id="mspan">内容</span></div>

<script src="jquery-2.1.1.min.js"></script>

<script>

    var div = $('#mdiv')

    var isFirst = true

    div.click(function(){

        if(isFirst){

            isFirst = false

            div.css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(90deg)", "-webkitTransition":"all 0.6s"})

            setTimeout(function(){

                $('#mspan').show()

                $('#mspan').css({'transform':'rotateY(180deg)','display':'block'})

                div.css('background','none')

            },700)

            setTimeout(function(){

                div.css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(180deg)", "-webkitTransition":"all 0.6s"})

            },800)

        }

    })

</script>

</body>

</html>

js控制div旋转的例子：

<DIV id=aDiv style="WIDTH: 70pxPOSITION: absoluteHEIGHT: 70px">

<IMG width=70 height=70 src="http://www.smallrain.net/jsimg/images/pic.gif" />//假如这个图

<DIV>

//使角度转起来

var angle = 0

function doRotate() {

//检查并确保角度值在0到360之间

if(angle>360) angle-=360

//使角度增加

angle+=15

//do rotation

rotate("aDiv",angle)

//定位旋转中心

var el = document.getElementByIdx_x_x("aDiv")//C#中要马上设位置.

el.style.top = 25 - (el.offsetHeight/2)//父元素的高度/2-旋转元素高度/2,还需注意旋转是同父元素的LOP,和left上关的,请上机测试

el.style.left = 25 - (el.offsetWidth/2)//父元素的宽度/2-旋转元素度/2

//循环

setTimeout("doRotate()",20)

}