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. 非常简洁的网页Tab效果setTab

    网页上使用频率最高的Tab标签效果,封装成了一个setTab函数,使用方法非常简单。 setTab函数完整代码: 复制代码 代码如下: script function setTab(name, cursel, n) { for (i = 1; i = n; i++) { var menu = document.getElementById(name + i); var con =

  2. 仿患者咨询平台效果

    仿患者咨询平台效果,模拟患者提问专家回复效果,吸引患者点击咨询,测试表明点击率非常高。 修改问答数据可修改js/data.js文件,问答数据已json数组形式保存。 在线演示: 仿患者咨询平台效果 下载地址: 仿患者咨询平台效果 效果截图: 展开效果 收起效果

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

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

  4. flash图片轮播bcastr4

    flash图片轮播bcastr4,flash实现的图片轮播播放器效果。包含一个slide.swf和一个配置文件config.xml。使用起来简单方便。 示例打包下载: flash图片轮播bcastr4 测试请上传到服务器上。 使用代码: 复制代码 代码如下: object id=bcastr4 data=swf/slide.swf

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

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

随机推荐

  1. 非常简洁的网页Tab效果setTab

    网页上使用频率最高的Tab标签效果,封装成了一个setTab函数,使用方法非常简单。 setTab函数完整代码: 复制代码 代码如下: script function setTab(name, cursel, n) { for (i = 1; i = n; i++) { var menu = document.getElementById(name + i); var con =

  2. 仿患者咨询平台效果

    仿患者咨询平台效果,模拟患者提问专家回复效果,吸引患者点击咨询,测试表明点击率非常高。 修改问答数据可修改js/data.js文件,问答数据已json数组形式保存。 在线演示: 仿患者咨询平台效果 下载地址: 仿患者咨询平台效果 效果截图: 展开效果 收起效果

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

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

  4. flash图片轮播bcastr4

    flash图片轮播bcastr4,flash实现的图片轮播播放器效果。包含一个slide.swf和一个配置文件config.xml。使用起来简单方便。 示例打包下载: flash图片轮播bcastr4 测试请上传到服务器上。 使用代码: 复制代码 代码如下: object id=bcastr4 data=swf/slide.swf

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

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