JS实现让网页背景图片斜向移动的方法_javascript技巧

本文实例讲述了JS实现让网页背景图片斜向移动的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

<html>
<head>
<title>JS实现让网页背景图片斜向移动</title>
<body background="images/changshi.ico">
<script language="Javascript">
<!--
function selectAll(theField){
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//-->
</script>
<script language="Javascript">
<!--
var background = "images/changshi.ico";
var speed = 0;
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName != "Netscape" || browserVer >= 4.5) {
function moveback(movert,movedn,hPos,vPos) {
if (arguments[4])
document.body.style.backgroundImage = "url(\"" + arguments[4] + "\")";
if (arguments[5])
document.body.style.backgroundRepeat = arguments[5]
if (!isNaN(hPos)) {
if ((movert!=0) && (hPos>0)) hPos=-100000
hPos += movert
}
if (!isNaN(vPos)) {
if ((movedn!=0) && (vPos>0)) vPos=-100000
vPos+= movedn
}
document.body.style.backgroundPosition= hPos + " " + vPos
if (isNaN(hPos)) hPos = "\"" + hPos + "\""
if (isNaN(vPos)) vPos = "\"" + vPos + "\""
setTimeout("moveback("+movert+","+movedn+","+hPos+","+vPos+")",speed)
}
moveback(1,1,0,0, background);
}

//-->
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-10-21 14:20:33

JS实现让网页背景图片斜向移动的方法_javascript技巧的相关文章

js实现背景图片感应鼠标变化的方法_javascript技巧

本文实例讲述了js实现背景图片感应鼠标变化的方法.分享给大家供大家参考.具体分析如下: 鼠标点击后背景图片变化,点击另外一个菜单项前面的会自动恢复背景,其实这个如果单纯使用CSS是没办法做的,我们还要使用JS来判断鼠标状态,代码如下: <style type="text/css"> .dh a{ background:#FFFFCC; width:50px; height:30px; display:block; text-align:center; color:#0000

js给网页加上背景音乐及选择音效的方法_javascript技巧

本文实例讲述了js给网页加上背景音乐及选择音效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>给网页加上背景音乐,选择音效功能</TITLE> <STYLE> <!--样式单 --> a{font-size:30pt;color:blue;font-family:Vineta BT} a:link{text-decoration:none;} a:hover{text-

JS实现超简洁网页title标题跑动闪烁提示效果代码_javascript技巧

本文实例讲述了JS实现超简洁网页title标题跑动闪烁提示效果代码.分享给大家供大家参考,具体如下: 这里演示不几行JS代码实现的网页Title文字跑动效果,类似有消息时的标题闪烁提醒功能,在JS代码中,当变量_record累加到3是,将其赋值为1.相当于无限循环.需要显示的消息提示内容可自拟哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-blink-style-codes/ 具体代码如下: <html xmlns="

JS实现简易图片轮播效果的方法_javascript技巧

本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char

JS+CSS实现自动改变切换方向图片幻灯切换效果的方法_javascript技巧

本文实例讲述了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

超强的IE背景图片闪烁(抖动)的解决办法_javascript技巧

很多人都遇到过在页面部分操作中IE背景图片重新加载而导致页面闪动的bug,那么如何解决它呢? 在国外某blog上看到一解决办法: 添加如下脚本即可: document.execCommand("BackgroundImageCache", false, true) 很简单吧?但很奇怪为什么这不是IE浏览器默认的选项呢?有哪位高人知道原因的请告知俺,不甚感激!

JS实现图片局部放大或缩小的方法_javascript技巧

本文实例讲述了JS实现图片局部放大或缩小的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

js判断图片加载完成后获取图片实际宽高的方法_javascript技巧

本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

JS实现网页上随机产生超链接地址的方法_javascript技巧

本文实例讲述了JS实现网页上随机产生超链接地址的方法.分享给大家供大家参考,具体如下: 这是一个JavaScript的应用,每刷新一次页面,会自动更换一次链接,虽然不常用,不过对Javascript随机函数Math.random() 的使用将直到引导作用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-math-rand-url-show-codes/ 具体代码如下: <html> <head> <title>在