js实现鼠标经过时图片滚动停止的方法


Posted in Javascript onFebruary 16, 2015

本文实例讲述了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="Content-Type" content="text/html; charset=gb2312" />

<title>鼠标经过时,<a href='sitejs-16691-1.html' target='_blank'><u>图片滚动</u></a>停止效果</title>

</head>

<style type="text/css">

<!--

#www_3water_net {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 325px;

height:245px;

}

#www_3water_net img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

-->

</style>

<body>

向左滚动

<div id="www_3water_net">

<div id="indemo">

<div id="demo1">

<a href="#"><img src="images/m01.jpg" border="0" /></a>

<a href="#"><img src="images/m02.jpg" border="0" /></a>

<a href="#"><img src="images/m03.jpg" border="0" /></a>

<a href="#"><img src="images/m04.jpg" border="0" /></a>

<a href="#"><img src="images/m05.jpg" border="0" /></a>

<a href="#"><img src="images/m06.jpg" border="0" /></a>

</div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

var speed=10;

var tab=document.getElementById("www_3water_net");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript针对DOM的应用分析(二)
Apr 15 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
学习Node.js模块机制
Oct 17 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
Vue.use源码学习小结
Jun 20 Javascript
javascript实现简易聊天室
Jul 12 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 #Javascript
JavaScript简介
Feb 15 #Javascript
JavaScript的原型继承详解
Feb 15 #Javascript
javascript 闭包详解
Feb 15 #Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 #Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 #Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 #Javascript
You might like
用PHP实现验证码功能
2006/10/09 PHP
随机广告显示(PHP函数)
2006/10/09 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
python去除字符串中的换行符
2017/10/11 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
高级销售求职信
2014/02/21 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
给小学生的新年寄语
2014/04/04 职场文书
小学推普周活动总结
2015/05/07 职场文书
工商行政处罚决定书
2015/06/24 职场文书
电视新闻稿
2015/07/17 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书