1、新建一个html文件,命名为test.html。
2、在test.html文件内,使用div标签创建一行文字,文字内容为“小明”。
3、在test.html文件内,设置div标签的id属性为mytext,主要用于下面通过该id获得div对象。
4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“切换内容”。
5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行func()函数。
6、在js标签中,创建func()函数,在函数内,通过id(mytext)获得div对象,通过html()方法获得div内的文本内容,使用if语句判断获得的文字内容是否为指定的文本内容,如果不是,则通过html()方法改变文本内容。
在你原来的代码上进行了修改,加粗倾斜的部分是添加或者修改的位置
<script>
var timer1 = null
var el = null
var left = 1
function moveItRight() {
if (parseInt(el.style.left) >(screen.width - 50)) //el.style.left = 0
{
left = -1
}
else if (parseInt(el.style.left) <= 0) {
left = 1
}
el.style.left = parseInt(el.style.left) + 2 * left + 'px'//本题目最关键的一句代码,让el对象的左边距每次循环都增加2像素,也就是向右移动了2像素
timer1 = setTimeout(moveItRight, 25)//隔25毫秒后运行一次moveItRight函数
}
window.onload = function () {
el = document.getElementById("div1")
el.style.left = '500px'
moveItRight()
}
</script>
<html><head>
<title>jquery或JS拖动DIV左右移动</title>
<script src="jquery-1.7.1.min.js"></script>
<style type="text/css">
body {background-color: #fff }
.win {position: absolute top: 0px left: 0pxwidth: 300pxheight: 222px}
.title {height: 20pxwidth: 300px position: absolutebackground-color: #0094ff float: inherit top: 0px left: 0px }
.winCon { height: 200pxwidth: 298px position: absolute border: solid
border-width: 1px border-color: #0094ff border-top: none float: inherit left: 0px top: 20px }
</style>
</head>
<body onload="showDiv(this,'test1')">
</body>
<script type="text/javascript">
function showDiv(element, str) {
$(document.body).append("<div class='win' id='win" + str + "'><div class='title' id='" + str + "'></div><div class='winCon'> 清新自在</div></div>")
$("#" + str).mousedown(function (event) {
var offset = $(this).offset()
_x = event.clientX - offset.left
_y = event.clientY + 20 - offset.top
$("#win" + str).css({ "top": offset.top - 20 + "px" })
$("#win" + str).mousemove(function (event) {
_xx = event.clientX - _x
_yy = event.clientY - _y
this.style.left = _xx + "px"
this.style.top = _yy + "px"
this.style.zIndex = "100"
return false
})
return false
})
$("#win" + str).mouseup(function () {
$(this).unbind("mousemove")
$(this).css({ "z-index": "-1" })
return false
})
}
</script>
</html>