侧边栏的分享到

  <!Doctype html>
  <html>
  <head>
  <meta charset="utf-8">
   
  <style>
  *{margin:0;padding:0;}
  #div{width:100px;height:300px;background:green;position:absolute;left:-100px;}
  #div span{height:70px;background:yellow;position:absolute;top:100px;left:100px;}
  </style>
  </head>
  <body>
  <div id="div">
  <span>分享到</span>
  </div>
  <script>
  var odiv=document.getElementById(‘div‘);
   
  odiv.onmouseover=function (){
  ss(10,0);
  }
  odiv.onmouseout=function(){
  ss(-10,-100);
  }
   
  var timer=null;
  function ss(aa,bb){
  //bb目标
  clearInterval(timer);
  timer=setInterval(function(){
  if(odiv.offsetLeft==bb){
  clearInterval(timer)
  }else{
  odiv.style.left=odiv.offsetLeft+aa+‘px‘;
  }
   
  },33)
   
  }
   
  </script>
  </body>
  </html>
时间: 2024-11-14 12:55:08

侧边栏的分享到的相关文章

javascript 侧边栏一键分享移入移出效果

运动框架: 先要清除定时器,防止多次点击或者移入移出时,开启多个定时器,元素的运动会是所有定时器中运动的总和 当达到目的时,要清除定时器(使用if/else 实现) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999

Question2Answer添加百度分享按钮

开源程序Question2Answer程序的模板和wordpress模板有很大的不同,Question2Answer修改模板的时候并不是直接修改模板文件夹qa-theme下的文件,而是需要修改系统文件.当然Question2Answer也可以不修改模板文件添加百度分享按钮. 1.侧边栏添加百度分享 侧边栏添加百度分享按钮是最简单方便的,只需要进入Question2Answer管理中心–布局–所有页面底部自定义内容(支持HTML):添加百度分享-浮窗式.这样侧边栏的分享按钮就添加完成. 2.问题底

jquery实现分享到侧边栏原理

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

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

基于jquery的侧边栏分享导航

今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div class="zzsc"> <a href="http://www.w2bc.com/" class="lanren1"> <img

平常项目中用到的分享到侧边栏

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

告别2016迎接2017,分享一些第三方插件

原文 一:源代码实例 一个针对iOS模块化开发的解决方案 快速搭建项目源代码 模仿网易新闻做的精仿网易新闻 支付宝高仿版 高仿百度传课iOS版 模仿一元云购 wordpress源代码 v2ex源代码(文章类型,若报SVProgressHUD错,则把Podfile中的SVProgressHUD移除) PHPHub客户端(iOS8.0以上) 高仿美团iOS版 如何优化UITableView中Cell加载图片的实例 开源的iOS代码集合 包含各种不错的OC跟Swift的插件集合,插件名单 一个关于UI

17款jQuery在线QQ客服代码分享

17款jQuery在线QQ客服代码分享给大家咯!!拿走,不谢,我叫雷锋~~ jQuery侧边栏点击展开收缩在线QQ客服代码 jQuery网页右侧固定层显示隐藏在线qq客服代码 jQuery点击按钮遮罩弹出在线QQ客服代码 jQuery带留言在线qq客服代码 绿色的jquery qq在线客服网页右侧固定层qq客服隐藏显示代码 蓝色的jquery固定div悬浮在线客服代码 jquery固定层网页侧边栏在线qq客服代码 jquery浮动在左侧的QQ客服代码 带有弹性可伸缩的在线客服代码 jquery右

CSS侧边栏,ng-click定义选中事件

本篇小随笔,记录下侧边栏的写法和ng-click点击选中事件.因为这个工程不让引用jQuery.所以ng-click选中事件用了一个比较笨的方法实现的. 下面是HTML页面 按 Ctrl+C 复制代码 按 Ctrl+C 复制代码 css部分引入了angular里面的bootstrap,它和bootstrap官网里面的还是有点区别的,可以直接去angularjs官网下载. 还有就是自己写的css样式.同时引入了angular.min.js.因为工程还需要使用嵌套路由的方式,所以引入了ui-rout