javascript实现点击按钮让DIV层弹性移动的方法

2014-07-08  来源:本站原创  分类:javascript技巧  人气:1 

这篇文章主要介绍了javascript实现点击按钮让DIV层弹性移动的方法,实例分析了javascript操作div层的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javascript实现点击按钮让DIV层弹性移动的方法。分享给大家供大家参考。具体实现方法如下:

<!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">

<head>

<title>点击按钮让DIV层弹性移动特效</title>

<style type="text/css">

#div1{ background: #FFCC66; border:#FF6600 1px solid; height:100px; width:100px; position:relative; left:0px;}

</style>

<script type="text/javascript">

 var t=null;

 function startMove()

 {

  if(t)

  {

   clearInterval(t);

  }

  t=setInterval(move, 30);

 }

 var step=0;

 function move()

 {

  var odiv=document.getElementById("div1");

   step+=(100-odiv.offsetLeft)/50;

   step=step*0.98

  odiv.style.left=odiv.offsetLeft+step;

 }

</script>

</head>

<body>

<div id="div1">

</div>

<input type="button" value="移动" onclick="startMove()"/>

</body>

</html>

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

相关文章
  • javascript实现点击按钮让DIV层弹性移动的方法 2014-07-08

    这篇文章主要介绍了javascript实现点击按钮让DIV层弹性移动的方法,实例分析了javascript操作div层的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了javascript实现点击按钮让DIV层弹性移动的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

  • JS实现点击文字对应DIV层不停闪动效果的方法 2015-03-04

    这篇文章主要介绍了JS实现点击文字对应DIV层不停闪动效果的方法,实例分析了javascript操作div层的效果,非常实用,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错的一个动态效果,容易引起顾客的注意,这个代码就是实现了这个效果,点击某个方块后,方块就会闪动 <!DOCTYPE html PUB

  • jQuery实现DIV层收缩展开的方法 2013-10-18

    这篇文章主要介绍了jQuery实现DIV层收缩展开的方法,实例分析了jQuery中toggle与animate等方法的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery实现DIV层收缩展开的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

  • JS实现点击按钮自动增加一个单元格的方法 2013-11-01

    这篇文章主要介绍了JS实现点击按钮自动增加一个单元格的方法,实例分析了javascript操作表格单元格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个单元格 <HTML> <HEAD> <TITLE>js动态生成表格</TITLE> <META co

  • JavaScript实现点击按钮后变灰避免多次重复提交 2014-05-15

    注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置按钮变灰,倒计时一段时间后又可重复点击,具体实现如下,感兴趣的朋友可以参考下哈 注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置button要过一段时间才能继续点击.下面是一个简单的例子: <html> <head> <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> </he

  • js点击弹出div层实现可拖曳的弹窗效果 2014-10-26

    点击文字,弹出一个窗口,其实是一个弹出层,这个弹出层可以随鼠标拖曳,很炫的哦,另外,示例演示了用本方法弹出文字层和弹出图片层的具体代码,请根据选择使用哦,感兴趣的朋友可以研究下 弹出层.弹窗效果+拖曳功能 点击测试 asdasdasdasdasdasdasd 这里是一段文字哦! 点击测试 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 点击按钮弹出背景半透明圆角层效果(点击弹出隐藏层) 2011-07-30

    <!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"> <head> <meta http-equiv="Content-

  • javascript设置连续两次点击按钮时间间隔的方法 2013-10-02

    这篇文章主要介绍了javascript设置连续两次点击按钮时间间隔的方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法,分享给大家供大家参考.具体实现方法如下: 很多时候我们在实际应用中,可能并不希望按钮联系被不间断的点击,所以要限定一定的时间间隔才能够再次点击按钮,下面就通过代码实例介绍一下如何实现此功能,代码如下: <!DOCTYPE html> <html> <head> <meta chars

  • 利用javascript移动div层-javascript 拖动层 2013-10-07

    利用javascript开发在界面上随意拖动以下html code中的div层 利用javascript移动div层-javascript 拖动层: 程序功能:利用javascript开发在界面上随意拖动以下html code中的div层. javascript移动div层-javascript 拖动层代码- html code: <div id="div_Info" style="display: none; dz-index: 101; left: 175px; w

  • javascript控制Div层透明属性由浅变深由深变浅逐渐显示 2014-03-24

    控制Div层透明属性,由浅变深逐渐显示,由深变浅逐渐消失,具体实现代码如下,喜欢的朋友可以感受下 搬运的留着以后自己看! 复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果 代码支持IE6.7.8/firefox/Chrome浏览器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

  • JavaScript:Div层拖动效果实例代码 2014-12-27

    这篇文章介绍了JavaScript:Div层拖动效果实例代码,有需要的朋友可以参考一下 Div层拖动效果图: 实现: CSS: <style> div { position:relative; } </style> JS: 复制代码 代码如下: <script type="text/javascript"> var mouseover=true var xcoor; var ycoor; function coordinates() { if (ev

  • 原生js实现淘宝首页点击按钮缓慢回到顶部效果 2013-10-30

    本例将实现这样的一个效果:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字.点击按钮缓慢回到顶部 淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字.点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件.鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件.要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到

  • js 点击按钮弹出另一页,选择值后,返回到当前页 2013-12-11

    js 点击按钮弹出另一页,选择值后,返回到当前页,其实主要用于cms系统中,相关文章的搜索,要在已上传目录中选择一些图片等. 1. 效果图: 2. 主页面的代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript">

  • JS/jQuery实现默认显示部分文字点击按钮显示全部内容 2013-12-19

    默认显示部分文字,点击按钮显示全部,类似这样的功能在一些特殊的地方会见到吧,下面与大家分享下JS.jQuery如何实现,感兴趣的朋友可以参考下哈,希望对你有所帮助 <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id

  • js控制再次点击按钮之间的间隔时间可防止重复提交 2014-05-06

    使用js控制再次点击按钮之间的间隔时间可防止重复提交,需要的朋友可以参考下 <script type="text/javascript" language="javascript"> var wait = 60; function change() { $o = $("#J_refresh_checkcode"); if(wait == 0) { $o.removeAttr("disabled"); $o.html

  • js+CSS实现弹出居中背景半透明div层的方法 2014-07-08

    这篇文章主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • jQuery实现DIV层淡入淡出拖动特效的方法 2014-08-27

    这篇文章主要介绍了jQuery实现DIV层淡入淡出拖动特效的方法,涉及jQuery针对鼠标操作的常用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #div2 { positi

  • 利用javaScript实现点击输入框弹出窗体选择信息 2015-04-21

    这篇文章主要是对利用javaScript实现点击输入框弹出窗体选择信息进的实例行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 在这里奉上源代码,没有做样式处理,不过功能是可以的,希望大家可以和我交流交流! <html> <head> <title>点击弹出DIV选择信息</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword

  • JS控制一个DIV层在指定时间内消失的方法 2013-10-13

    这篇文章主要介绍了JS控制一个DIV层在指定时间内消失的方法,需要的朋友可以参考下 <!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"> <h

  • Jquery实现点击按钮,连续地向textarea中添加值的实例代码 2013-10-21

    本篇文章主要是对Jquery实现点击按钮,连续地向textarea中添加值的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="gbk"%> <%@ include file="/pages/common/taglibs.jsp"%&