zoukankan      html  css  js  c++  java
  • JavaScript也能求爱哦

    这里面做了一个JavaScript的求爱小特效,效果例如以下:

    不仅能出现以下的图的效果,还能够让这个图形尾随着鼠标转动哦,这里面仅仅是一个简单的没有修饰的小样例,基于这个样例能够让求爱,更加好玩了。闷骚男们,是不是能够给你的小萝莉发个这种网页啊。给力的。

    贴上code吧:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    body{
    	border:1px red solid;
    	1000px;
    	height:1000px;
    	margin:0px auto;
    	padding:0px;
    	color:green;
    }
    /*
    将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于
    其最接近的一个最有定位设置的父对象进行绝对定位。假设不存在这种父对象,则
    根据 body 对象。而其层叠通过 z-index 属性定义
    */
    div{
    position:absolute;
    }
    </style>
    <script type="text/javascript">
    //为什么要用onload,由于我在javascript代码中初始化时钟的div时,调试页面发现没有实现
    //后来发现原因,html的代码是从前往后解析的。当先解析到JavaScript代码的时候,向body中
    //加入�子节点的时候,找不到还未解析的body。所以应该先解析body的啦。方法有两种,一种就是下
    //的写法,还有一种也能够是在body标签中加入�onload方法。
    window.onload=function(){
    	init();
    };
    //定义一个div数组,来存储12个div
    //由于12个div位置上的关系,所以先确定一下圆点和半径,以便计算div的位置
    var divs=[];
    var loveBaby=["我","爱","你","!","宝","贝","你","爱","我","吗","勉","勉"]
    var CX=300;
    var CY=300;//----------------------网页中的位置坐标没有单位吗?
    var R=150;
    var divCenterNode;//中心点的位置要进行控制,设置全局变量
    //定义一个初始化的函数
    function init(){
    	//创建一个中心点位置的div(能够写上求爱对象哦)
    	divCenterNode=document.createElement("div");
    	divCenterNode.innerHTML="婷婷,嫁给我吧!";
    	document.body.appendChild(divCenterNode);
    	divCenterNode.style.left=(CX-50)+"px";
    	divCenterNode.style.top=(CY-30)+"px";
    	//创建12个div组成一个禁止的时钟,放在body中
    	for(var x=1;x<=12;x++){
    		//创建div
    		var divNode=document.createElement("div");
    		divNode.innerHTML=loveBaby[x-1];
    		//body对象不须要和其他对象一样去获取,js库中已经封装好了。
    		document.body.appendChild(divNode);
    		divs.push(divNode);
    	}
    	//每次启动startClock()对div元素进行又一次定位
    	/*
    	实际上要想达到旋转的效果,须要不断的进行偏移,或者说
    	进行又一次定位,可是作循环,不能控制间隔多久启动函数,那么
    	这时候window对象提供了方法。
    	*/
    	startClock();
    	
    }
    //div的偏移量
    var offset=0;//度数偏移量
    //将位置的定位和转动单独定义一个函数
    function startClock(){
    	for(var x=1;x<=12;x++){
    		var div = divs[x-1];
    		//每个数字的度数
    		var dushu=30*x+offset;
    		//  角度值  * Math.PI /180 = 弧度值
    		var divLeft = CX+R*Math.sin(dushu*Math.PI/180);
    		div.style.left=divLeft+"px";
    		var divTop = CY-R*Math.cos(dushu*Math.PI/180);
    		div.style.top=divTop+"px";
    	}
    	offset+=50;
    	//间隔一定的时间,回调这个函数
    	//经过指定毫秒值后计算一个表达式。第一个參数是表达式,第二个參数是时间
    	setTimeout(startClock,80);//window对象的方法
    }
    //定义这个时钟随着鼠标移动到不同的位置
    function clockMove(event){
    	CX=event.clientX;//鼠标所在位置的x坐标
    	CY=event.clientY;//鼠标所在位置的y坐标
    	divCenterNode.style.left=(CX-50)+"px";
    	divCenterNode.style.top=(CY-30)+"px";
    
    }
    </script>
    </head>
    <body onmousemove="clockMove(event)">
    <!-- 
    一、把12个数字按一圈显示出来
    	1创建12个DIV,分别赋值 1--12
    	2给12个DIV定位,围成一圈。	
    -->
    </body >
    </html>

    本来是想做一个会转动,会跑的时钟显示。所以代码中的命名和时钟有关,就不纠结了,亲。初学javascript,感觉javascript非常强大。

  • 相关阅读:
    Flutter 复制文本到剪切板、从剪切板读取文本【转】
    CSS元素超出部分滚动,并隐藏滚动条【转】
    Flutter解决按钮请求防重复提交【转】
    CSS文字超出宽度自动换行【转】
    flutter 使用 url_launcher 唤起三方应用【转】
    Dart 基本数据类型与类型归属判断【转】
    JS 生成唯一字符串UUID【转】
    gtk+笔记
    Win32 API笔记
    utf-8与utf-16的区别
  • 原文地址:https://www.cnblogs.com/yxwkf/p/3813788.html
Copyright © 2011-2022 走看看