js运动02----"分享到"侧边栏

1.分享到

通过目标值来确定方向!

<style>
        #div1{width: 100px;height: 200px;position: absolute;left: -100px;background-color: gray;}
        #div1 span{width: 20px;height: 60px;line-height: 20px;text-align:center;left: 100px;top: 70px; background-color: yellow;position: absolute;}
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById(‘div1‘);
            oDiv.onmouseover = function(){
                startMove(0);
            }
            oDiv.onmouseout = function(){
                startMove(-100);
            }
        }
        var timer = null;
        function startMove(iTarget){
            var oDiv = document.getElementById(‘div1‘);
            var iSpeed = 10 ;
            oDiv.offsetLeft < iTarget ? iSpeed = 10 : iSpeed = -10;
            clearInterval(timer);
            timer = setInterval(function(){
                if(oDiv.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘;
                }
            },30);
        }
    </script>
</head>
<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>

  

时间: 2024-10-12 11:42:11

js运动02----"分享到"侧边栏的相关文章

(37)JS运动之“分享到”移入移出功能

基本思路:采用定时器,为鼠标添加onmouseover和onmouseout功能,采用上一篇文章所写的js运动的实现方法来实现网站侧栏的"分享到"功能. <!DOCTYPE HTML> <!-- --> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width:150px; heig

简单的JS运动封装实例---侧栏分享到

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width: 100px; height: 200px; background: red;

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"><head><meta charset="utf-8">

JavaScript学习总结【11】、JS运动

动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 left.right.width.height.opacity ,那么既然是运动,就可以分为很多种,如匀速运动.缓冲运动.多物体运动.任意值运动.链式运动和同时运动.我们从最简单的动画开始,如何让单个物体运动,逐步深入多物体运动.多动画同时运动到实现完美运动框架的封装,在这个过程中,每一个运动都封装为

第八节 JS运动基础

运动基础 让Div运动起来 速度--物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS运

JS运动从入门到兴奋1

hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就由浅入深走进运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetle

JS运动1 (转)

JS运动从入门到兴奋1 http://www.cnblogs.com/moqing/p/5666476.html hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动 的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就进入运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,

js运动

1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后一翻书,就看见小人在动.js动画也一样.不同状态的DOM,用定时器控制,就能得到动画效果. window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = f

解析JS运动

解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化.方法:      1.运动的物体使用绝对定位       2.通过改变定位物体的属性(left.right.top.bottom)值来使物体移动.例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动.步骤:    1.开始运动前,先清除已有定时器 (因为:是连续点击按钮,物体会运动越来越快,造成运动混乱)    2.开启定时器,计算速度    3.把运动和停止隔开(if/else),判断停止条件,执行

jquery实现分享到侧边栏原理

几乎每一个网站,都有一个分享到侧边栏的功能, 我写的这个是固定在网页窗口的左侧, html: <!--------------分享到侧边栏----------------------> <div id="share"> <span>分享</span> </div> css: /*******************************分享到侧边栏**************************************/