js“分享到”侧边框伸缩实现

思路:
1,临界值是 -150 和 0
如果大于临界值,就要隐藏
2,隐藏:速度为负
显示:速度为正

3,如果与临界值相等,就清空定时器
否则,就运动

--------------------------------html
<div id="div1"><span>分享到</span></div>
<style>
#div1 { position:absolute; left:-150px; width:150px; height:200px; background:green;}
#div1 span {position:absolute; right:-20px; top:70px; width:20px; height:60px; line-height:20px; background:blue;}
</style>

----------------------------------------js
<script>

window.onload = function(){
	var oDiv = document.getElementById("div1");
	var timer = null;

	oDiv.onmouseover = function(){
		showHide(0);
	}

	oDiv.onmouseout = function(){
		showHide(-150);
	}

	//优化成一个方法
	function showHide(iCritical){
		clearInterval(timer);
		var speed;
		timer = setInterval(function(){
			if(oDiv.offsetLeft > iCritical){
				speed = -10;
			}else{
				speed = 10;
			}

			if(oDiv.offsetLeft == iCritical){
				clearInterval(timer);
			} else{
				oDiv.style.left = oDiv.offsetLeft + speed + "px";
			}

		},30);
	}

	//展开
	function show(){
		clearInterval(timer);
		timer = setInterval(function(){
			if(oDiv.offsetLeft>=0){
				clearInterval(timer);
			}else{
				oDiv.style.left = oDiv.offsetLeft + 10 + "px";
			}
		},30);
	}

	//隐藏
	function hide(){
		clearInterval(timer);
		timer = setInterval(function(){
			if(oDiv.offsetLeft==-150){	//这里是等于
				clearInterval(timer);
			}else{
				oDiv.style.left = oDiv.offsetLeft - 10 + "px";
			}
		},30);
	}

}

</script>
 

js“分享到”侧边框伸缩实现

时间: 2024-11-08 07:47:15

js“分享到”侧边框伸缩实现的相关文章

自己封装的一个JS分享组件

因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. 这次的核心就是:JS只负责事件+结构,也就是把功能实现出来,具体的外观样式,则使用者自己进行定义. 以下是新版分享插件的代码: 1 (function(root){ 2 'use strict'; 3 function share(params){ 4 5 this.params = params;

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 http-equiv

js分享1

/* ** Author : hzhang.Ashe ** Date : 2014.12.11 ** Descri : 报告管理 */ var ReportManager = (function () { //获取数据 function InitGrid(searchCondition) { //获取表格高度 var _height = getGridHeight(); var setLoading = setTimeout(function () { showLoading(); }, 100

微信6.0.2 js 分享

12月25日 微信更新到6.0.2版本,此次对开发者影响比较大的就是原来微信分享的JS 将不再对开发者开发,对此官方的解释是: 旧版的获取分享状态及设置分享内容的JS接口一直用于内部业务,并未对外开放,在微信公开的开放文档里面并没有此接口. 某些第三方借助微信客户端漏洞在未获得权限的情况下使用接口,微信6.0.2版本对此漏洞做了修复以确保用户分享内容的准确性,避免诱导分享. 另外,不久将向广大公众号开放正式分享接口供开发者使用. 根据今天我们公司跟腾讯交涉的反馈是腾讯将对此接口进行白名单验证,相

学习js分享

购物车怎么做见代码 /购物车 (数组版本)(function ($) { $.fn.TaShopCartArray = function (setting) { //初始化配置 var opts = $.extend({}, $.fn.TaShopCartArray.defaults, setting); //读取cookeie信息 var _initdata = []; if (opts.savecookie && $.cookie(opts.cookiename) != null &a

iShare.js分享插件

iShare.js是一个小巧的分享插件,纯JS编写,不依赖任何第三方库,使用简便.为啥写这个插件? 因为在搭建个人blog时(还没有搭建好(¯﹃¯)),对目前国内比较受欢迎的分享插件都不太满意,主要如下几点: 不太喜欢官方提供的样式,想重新定制,但又不太方便 提供的大部分接口都没用到,真正用到就那么几个,显得有点冗余 没有进行更新维护,部分接口都是挂掉 另外,工作中,有时想要一个可以自定义样式.支持常用的分享接口.使用方便.不依赖于第三库的独立库.比如写活动页面时(⊙﹏⊙) 基于上述原因自己就创

js分享功能实现

分享功能初步测试,title为当前页面的title. 其他详见注释!!! <!doctype html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>分享代码测试</title> <meta name="author" content=

微信Js分享朋友接口invalid signature解决方法

导致这个错误是因为签名算法错误 签名需要 noncestr timestamp(因为变量长度限制,不能直接使用毫秒时间戳,要除以1000) jsapi_ticket url 根据微信的文档说明做的话 最容易出错的地方是url 文档上对url的描述反正我是没怎么看懂~ 好了吐槽完毕,是时候上代码了 Java代码:         @RequestMapping("share2Firend")         //from.isappinstalled参数是自定义分享接口时 微信服务器带过

自己动手写js分享插件 [支持https] (可以分享QQ空间,微信,新浪微博。。。)

由于百度分享,jiathis 等分享插件在https下均会报错,就萌生了自己动手写一个分享插件的念头,其实实现起来一点都不难,以下代码都已在https网站运行通过,特附上以下代码:还请各位看官不吝赐教: 附上演示效果网址:https://www.aishandian.com/jiekuan_zhishi-979.html 动画实现效果代码 $(document).on("click", ".msb_main", function() { if($(this).has