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一点特殊用法
May 28 Javascript
javascript基本语法分析说明
Jun 15 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
小程序实现搜索框
Jun 19 Javascript
JS实现鼠标移动拖尾
Dec 27 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
js操作select控件的几种方法
2010/06/02 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
angularjs基础教程
2014/12/25 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
python使用cookielib库示例分享
2014/03/03 Python
Python去除字符串两端空格的方法
2015/05/21 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python如何实现视频转代码视频
2019/06/17 Python
使用pip安装python库的多种方式
2019/07/31 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
Java程序员面试题
2013/07/15 面试题
旅游个人求职信范文
2014/01/30 职场文书
活动策划求职信模板
2014/04/21 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python