js实现网站首页分享滑块
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
#div1{
width:150px;
height: 200px;
background-color: green;
position: absolute;
left:-150px; }
#div1 span{
position: absolute;
width: 20px;
height: 60px;
line-h eight:20px ;
background: blue;
right:-20px;
top:70px;
}
</style>
<body>
<div id="div1" > <span>分享到</span>
</div> </body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove();
}
oDiv.onmouseout=function(){
startMove(-);
}
}
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=;
if(oDiv.offsetLeft>iTarget){
speed=-;
}else{
speed=;
}
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},);
} </script>
</html>
js实现网站首页分享滑块的更多相关文章
- Sequence.js - 适合电子商务网站的图片滑块
Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...
- 基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 抓取Bing每日图片作为网站首页背景
把Bing搜索的背景图片设置为自己网站的背景,实现背景及资讯的每日更新 效果图如下: 理一下思路,首先我们要抓取Bing的每日图片及最新资讯,然后保存图片及信息到本地,最后显示图片及资讯到网站首页. ...
- 织梦DEDECMS网站首页如何实现分页翻页
织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head>&l ...
- 保持url唯一性 解决多个网站首页问题
原文地址:http://www.seowhy.com/bbs/thread-2694339-1-1.html 在网站SEO优化过程中,经常会遇到这样或者那样的常见技术型问题,达闻现将此类常见技术问题总 ...
- Vue 网站首页加载优化
Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等 1. v ...
- 对石家庄铁道大学网站首页进行UI分析
对石家庄铁道大学网站首页进行UI界面分析首先,铁道大学的网页首页分为图文热点,学校新闻,校内公告,媒体看铁大,学术咨询等等模块.通过分析这些模块,可以看出,学校网站首页针对的使用对象有很多,包括学校领 ...
- dedecms如何随机调用指定分类下的文章到网站首页
dedecms是全静态的,有时会因为其他事情好几天没写文章推荐到首页,那样对se不是很友好.原本ytkah是想在网站首页上半部分调用几篇id从200到500的文章随机展示的,这样每次更新首页给se的赶 ...
- js获取网站根目录
//js获取网站根路径(站点及虚拟目录),获得网站的根目录或虚拟目录的根地址 function getRootPath(){ var strFullPath=window ...
随机推荐
- loadRunner手动关联，通过 web_reg_save_param()函数
Action() { //<B>sign up now</B></A> /* web_reg_save_param_regexp( ...
- 几种线程安全的Map解析
转载自 面试必问-几种线程安全的Map解析 HashMap线程安全的吗? Java中平时用的最多的Map集合就是HashMap了,它是线程不安全的. 看下面两个场景: 1.当用在方法内的局部变量时,局 ...
- NFS客户端阻塞睡眠问题与配置调研
Linux NFS客户端需要很小心地配置,否则在NFS服务器崩溃时,访问NFS的程序会被挂起,用ps查看,进程状态(STAT)处于D,意为(由于IO阻塞而进入)不可中断睡眠(如果是D+,+号表示程序运 ...
- ID3和C4.5分类决策树算法 - 数据挖掘算法（7）
(2017-05-18 银河统计) 决策树(Decision Tree)是在已知各种情况发生概率的基础上,通过构成决策树来判断其可行性的决策分析方法,是直观运用概率分析的一种图解法.由于这种决策分支画 ...
- Shell生成数字序列
转自http://kodango.com/generate-number-sequence-in-shell Shell里怎么输出指定的数字序列: for i in {1..5}; do echo $ ...
- deepin安装Python3.6和pip
1.安装python3.6 sudo apt-get install python3.6 2.修改软连接 sudo ln -s /usr/local/bin/python3.6 /usr/bin/py ...
- php 查找字符串里面中文字符第一次出现的位置，并插入字符串
//查找字符串里面中文字符第一次出现的位置,并插入字符串 function find_first_chinese_insert($str,$insert_str){ $count = mb_strle ...
- Linux 搭建安装Maven环境
1.前提条件: 1)下载并安装好JDK .在终端输入命令“java -version”,如果出现类似如下信息说明JDK安装成功. $ java -version java version " ...
- P3302 [SDOI2013]森林（主席树+启发式合并）
P3302 [SDOI2013]森林 主席树+启发式合并 (我以前的主席树板子是错的.......坑了我老久TAT) 第k小问题显然是主席树. 我们对每个点维护一棵包含其子树所有节点的主席树 询问(x ...
- 点击button后刷新了页面
今天遇到一个特别奇怪的事,在页面中使用button标签,添加了点击事件onclic,点击的时候倒是执行了绑定的方法,但页面被刷新了! 什么鬼?我没与提交表单啊! 原来,button默认具有提交表单的动 ...