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 ...
随机推荐
- AWS免费云服务套餐申请步骤及常见问题
AWS免费云服务套餐申请步骤及常见问题 AWS免费使用套餐常见问题_AWS免费云服务套餐_-AWS云服务https://amazonaws-china.com/cn/free/faqs/ 什么是 AW ...
- 51Nod 1212 无向图最小生成树 （路径压缩）
N个点M条边的无向连通图,每条边有一个权值,求该图的最小生成树. Input 第1行:2个数N,M中间用空格分隔,N为点的数量,M为边的数量.(2 <= N <= 1000, 1 &l ...
- 大神教你Nginx常用基础配置方案
Nginx的fastcgi模块参数设置 Nginx 有两个配置文件fastcgi_params.fastcgi.conf,两者唯一的区别是,fastcgi.conf 多一个参数 SCRIPT_FILE ...
- 数据库-MySQL入门
什么是数据库? 一定方式储存在一起.能与多个用户共享.具有尽可能小的冗余度.与应用程序彼此独立的数据集合 数据库管理系统(简称DBMS):是为管理数据库而设计的电脑软件系统,一般具有存储.截取.安全保 ...
- right spindle supply short to gnd
hardware guy found that the R1004 lead to this error, but this error should not be checked, because ...
- AdminLTE模板使用
AdminLTE介绍: AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具,它提供了一系列响应的,可重复使用的组件,并内置了多个模板页面;同时自适应多种屏幕分辨率,兼 ...
- NATS—发布/订阅机制
概念 发布/订阅(Publish/subscribe 或pub/sub)是一种消息范式,消息的发送者(发布者)不是计划发送其消息给特定的接收者(订阅者).而是发布的消息分为不同的类别,而不需要知道什么 ...
- 03: pip使用
1.1 pip常用方法 1.自我升级(升级pip到最新版本) pip install --upgrade pip 2. 安装库 pip install XXX 3. 查看当前环境所有已安装的库 pip ...
- win-Linux文件脚本迁移过程中的问题 syntax error: unexpected end of file
问题: 在win下写好的shell脚本,放到Linux上测试sh -n报错如下 ORA_check.sh: line 251: syntax error: unexpected end of fil ...
- Centos7.03搭建JDK、Tomcat、MySql环境
本人linux服务器配置是:centos_7_03_64_20G_xdragon_20171025.vhd 公网IP:106.14.14.224 内存:2GB SecureCRT8.0:https:/ ...