JS小太阳在页面移动

模板网 2014-09-12

JS小太阳在页面移动,移到小太阳上有文字提示,点击可进行咨询。

效果截图:

JS小太阳在页面移动

<title>JS小太阳在页面移动</title>
<script>
document.write ("<div id=sun style=position:absolute;width:48px;height:48px; z-index:999999999999999999999999999999999999999;>")
document.write ("<a href='/swt' target='_blank' title='有问题?点我哦~'>")
document.write ("<img src=\"/data2/20140912/sun.png\" border=0 onload=fixPNG(this) alt=有问题?点我哦~>")
document.write ("</a></div>")
function fuckSWT(e, delay) {
	var x = parseInt(Math.random() * document.documentElement.clientWidth);
	var y = parseInt(Math.random() * document.documentElement.clientHeight) + document.body.scrollTop;
	var k = 1;
	var dom = document.getElementById(e);
	var timer = null;
	var Inc = true;
	var isIE = /msie/i.test(navigator.userAgent);
	var screen = {
		x : document.documentElement.clientWidth - parseInt(dom.style.width),
		y : document.documentElement.clientHeight - parseInt(dom.style.height)
	};
	function go() {
		var top = isIE ? document.documentElement.scrollTop : document.body.scrollTop;
		if (x >= screen.x) {
			Inc = false;
		}
		if (x <= 0) {
			Inc = true;
		}
		x += (Inc ? 1 : -1);
		if (y - top <= 0) {
			y = top;
			k *= -1;
		} else if (y - top > screen.y) {
			k *= -1;
		}
		y += k;

		dom.style.left = x + 'px';
		dom.style.top = y + 'px';
	}
	timer = setInterval(go, delay);
	dom.onmouseover = function () {
		clearInterval(timer);
	};
	dom.onmouseout = function () {
		timer = setInterval(go, delay);
	};
}
window.onload = function () {
	new fuckSWT('sun', 20);
}

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage)

{

     if ((version >= 5.5) && (version < 7) && (document.body.filters))

     {

       var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""

     var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""

     var imgTitle = (myImage.title) ?

               "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' "

     var imgStyle = "display:inline-block;" + myImage.style.cssText

     var strNewHTML = "<span " + imgID + imgClass + imgTitle

                   + " style=\"" + "width:" + myImage.width

                   + "px; height:" + myImage.height

                   + "px;" + imgStyle + ";"

                   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

                   + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"

     myImage.outerHTML = strNewHTML

     }

}
</script>
<p>演示中小太阳有时候在左上角不移动,请将代码保存到本地查看</p>

相关文章

  1. 手机站底部快速问医生动态图标效果

    手机站底部快速问医生动态图标效果,手机站底部常用的快速问医生效果实现。 完整代码: 复制代码 代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.

  2. JS高级Marquee代码

    JS高级Marquee代码 创建实例: //参数直接赋值法 new Marquee(marquee) new Marquee(marquee,top) ...... new Marquee(marquee,0,1,760,52) new Marquee(marquee,top,1,760,52,50,5000) ...... new Marquee(marquee,0,1,760,104,50,5000,3000,52) new Marquee

  3. 窗口失去焦点是滚动标题,获得焦点后不滚动

    效果要求: 窗口失去焦点是滚动标题,获得焦点后标题不滚动。 效果见代码。

  4. 纯JS写的右下角QQ抖动效果

    纯JS写的右下角QQ抖动效果,代码简单容易理解修改。 复制代码 代码如下: script /*** 窗口抖动 ***/ function shake(){ var a=[bottom,right],b=0; var u=setInterval(function(){ document.getElementById(lovexin1).style[a[b%2]]=(b++)%42?0:4 + px; if(b

  5. 网页浮动窗口跟随页面上下滑动效果

    网页浮动窗口跟随页面上下滑动效果,当网页滚动条向下滚动的时候,该浮动窗口也会向下滑动。 核心代码: 复制代码 代码如下: script var tips; var theTop = 100; /*这是默认高度,越大越往下*/ var old = theTop; window.onload=function(){ initFloatTips()

随机推荐

  1. 手机站底部快速问医生动态图标效果

    手机站底部快速问医生动态图标效果,手机站底部常用的快速问医生效果实现。 完整代码: 复制代码 代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.

  2. JS高级Marquee代码

    JS高级Marquee代码 创建实例: //参数直接赋值法 new Marquee(marquee) new Marquee(marquee,top) ...... new Marquee(marquee,0,1,760,52) new Marquee(marquee,top,1,760,52,50,5000) ...... new Marquee(marquee,0,1,760,104,50,5000,3000,52) new Marquee

  3. 窗口失去焦点是滚动标题,获得焦点后不滚动

    效果要求: 窗口失去焦点是滚动标题,获得焦点后标题不滚动。 效果见代码。

  4. 纯JS写的右下角QQ抖动效果

    纯JS写的右下角QQ抖动效果,代码简单容易理解修改。 复制代码 代码如下: script /*** 窗口抖动 ***/ function shake(){ var a=[bottom,right],b=0; var u=setInterval(function(){ document.getElementById(lovexin1).style[a[b%2]]=(b++)%42?0:4 + px; if(b

  5. 网页浮动窗口跟随页面上下滑动效果

    网页浮动窗口跟随页面上下滑动效果,当网页滚动条向下滚动的时候,该浮动窗口也会向下滑动。 核心代码: 复制代码 代码如下: script var tips; var theTop = 100; /*这是默认高度,越大越往下*/ var old = theTop; window.onload=function(){ initFloatTips()