鼠标经过箭头时,图片会向左或向右…

最新推荐文章于 2021-06-03 02:27:02 发布
最新推荐文章于 2021-06-03 02:27:02 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： JS技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haibo0668/article/details/51565882
版权
 
 
 

<!--head区域内代码-->
<head>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
//more javascript from http://www.webjx.com
var sh;
marqueesWidth=610;
preLeft=0; currentLeft=0; stopscroll=false; getlimit=0;preTop=0; currentTop=0;

function scrollLeft()
{
 if(stopscroll==true) return;
 preLeft=marquees.scrollLeft;
 marquees.scrollLeft+=2;
 if(preLeft==marquees.scrollLeft)
 {
  //marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
 }
}

function scrollRight()
{
 if(stopscroll==true) return;

 preLeft=marquees.scrollLeft;
 marquees.scrollLeft-=2;
 if(preLeft==marquees.scrollLeft)
 {
  if(!getlimit)
  {
   marquees.scrollLeft=templayer.offsetWidth*2;
   getlimit=marquees.scrollLeft;
  }
  marquees.scrollLeft-=1;
 }
}

function Left()
{
 stopscroll = false;
 sh = setInterval("scrollLeft()",20);
}

function Right()
{
 stopscroll = false;
 sh = setInterval("scrollRight()",20);
}

function StopScroll()
{
 stopscroll = true;
 clearInterval( sh );
}

 

function SelectType(value)
{
 document.all.sendForm.page.value = 1;
 document.all.sendForm.type.value = value;

 document.all.sendForm.submit();
}

function init()
{
 with(marquees)
 {
  style.height=0;
  style.width=marqueesWidth;
  style.overflowX="hidden";
  style.overflowY="visible";
  style.align = "center";
  noWrap=true;
 }
}


//-->
</SCRIPT>
</head>
<!--body区域内代码-->
<body οnlοad="init()">
<TABLE cellSpacing=1 width=660 align=center border=0>
<TR bgColor=#f8f8f8>
<TD align=middle width=25><IMG
      src="http://www.webjx.com/upfiles/20050905/20050905085723_left.gif" border=0 οnmοuseοut=StopScroll() οnmοuseοver=Left() style="CURSOR: pointer"></TD>
    <TD>
      <DIV id=marquees>
      <TABLE border=0><TR>

<TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe

src='http://www.webjx.com/img/200406301.jpg' border=0></td>
</tr><tr><td><div align="center">第1期</div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406302.jpg' border=0></td>
</tr><tr><td><div align="center">第2期</div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406303.jpg' border=0></td>
</tr><tr><td><div align="center">第1期 </div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406304.jpg' border=0></td>
</tr><tr><td><div align="center">第1期</div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406305.jpg' border=0></td>
</tr><tr><td><div align="center">第2期</div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406304.jpg' border=0></td>
</tr><tr><td><div align="center">第3期</div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406305.jpg' border=0></td>
</tr><tr><td><div align="center">第4期</div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406302.jpg' border=0></td>
</tr><tr><td><div align="center">第5期</div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406301.jpg' border=0></td>
</tr><tr><td><div align="center">第6期</div></td>
</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG

class=imgframe src='http://www.webjx.com/img/200406303.jpg' border=0></td>
</tr><tr><td><div align="center">第7期</div></td>
</tr></table></TD>     
</TR></TABLE></DIV>
<DIV id=templayer style="LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px"></DIV></TD>
<TD align=middle width=25><IMG
      src="http://www.webjx.com/upfiles/20050905/20050905085729_right.gif" border=0 οnmοuseοut=StopScroll() οnmοuseοver=Right() style="CURSOR: pointer"></TD>
</TR></TABLE>
</body>

我是高手高手高高手
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标放到显示图片上显示左右箭头翻页效果
05-11
鼠标放到显示图片上显示左右箭头翻页效果
js 左右箭头实现图片或div内容切换
08-17
js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换js 左右箭头实现图片或div内容切换
鼠标经过箭头时,图片会向左或向右横向移动
ywybj686的专栏
05-15 766
//more javascript from http://www.webjx.comvar sh;marqueesWidth=610;preLeft=0; currentLeft=0; stopscroll=false; getlimit=0;preTop=0; currentTop=0;function scrollLeft(){ if(stopscroll==true) return; 
jQuery实现的无缝广告图片左右滚动功能详解
11-26
2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉上的效果,^_^) 3.鼠标放上去则clearInterval,移开后继续setInterval 4.移动效果写成一...
CSS定义鼠标经过时鼠标图形的十五种样式整理
01-19
text是移动到文本上的那种效果 wait是等待的那种效果 default是默认效果 e- resize是向右的箭头 ne-resize是向右上的箭头 n-resize是向上的箭头 nw-resize是向左上的箭头 w- resize是向左的箭头 sw-resize是左下的...
带按钮控制jQuery图片左右滚动代码
06-11
这是一款鼠标悬停标题动画向上浮动出现蓝色背景遮罩，并带有加号点击查看详情的jQuery图片滚动代码效果，还可以点击箭头按钮控制图片向左向右滚动。
jQuery按钮控制图片左右滚动代码.zip
05-25
jQuery按钮控制图片左右滚动代码，鼠标经过图片遮罩层，点击按钮图片左右滚动带加号详情。
鼠标右键，键盘控制左右移动echarts标记线、标记点
03-05
鼠标右键功能，键盘控制echarts添加标记线、标记点，删除标记线、标记点，左右移动标记点、标记线
鼠标点击一幅矩形图片,以矩形对角线为界算出是点了左边还是右边!
9年.NET撸码员，月薪5K
10-27 242
今天QQ交流群里有人问了这题,就是鼠标在一幅矩形图片上点击,以矩形的对角线为界,如何知道点击的是矩形的左半部分还是右半部分.想了一下,也跟群里人讨论了一下,如下图: [img]http://niunan.iteye.com/upload/picture/pic/24021/3cd26219-e011-303b-8f74-ba10fed830df.jpg[/img] 假设鼠标在矩形上任意点的...
通过 css3 实现鼠标划过图片移动
景山编程-顺道编程
04-12 3993
.find_item_img:hover{transform: translateX(-5px);} .find_item_img{transition: transform .4s ease-out;position: absolute;bottom: 5px; right: 10px;width: 80px;height: 80px;}关键点： position: 绝对定位 :hover 方
在图片上显示左右箭头的翻页代码
weixin_33851177的博客
03-03 781
使用JS实现在图片上显示左右箭头的翻页代码，预览效果网址：http://www.keleyi.com/keleyi/phtml/picnext/ 本实例使用了javascript的onmousemove 事件。onmousemove 事件会在鼠标指针移动时发生。 语法onmousemove="SomeJavaScriptCode"SomeJavaScriptCode是必需参数。规定该事件发生时...
html鼠标悬停显示箭头,CSS 悬停时出现箭头的按钮
weixin_32349913的博客
06-03 1848
CSS语言：CSSSCSS确定* {box-sizing: border box;}.center {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}.btn,button {background: #1d1d1d;bor...
鼠标经过变成小手/箭头
weixin_44893380的博客
08-28 4168
style="cursor:hand" hand-----------------手型 pointer--------------手型（多种浏览器下都可以使用） crosshair-----------十字型 text------------------移动到文本上效果 wait-----------------等待效果 default-------------默认效果 help----------------问号 e-resize-----------向右的箭头 ne-resize----------向
js 鼠标放置图片展示大图并跟随鼠标移动
奥特曼的小怪兽
02-28 3764
js 鼠标放置图片展示大图并跟随鼠标移动html 页面中，鼠标放置图片上方，显示大图并跟随鼠标移动，当鼠标移出图片内容时，大图消失 源码内容如下：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=u
如何实现轮播CSS伪类鼠标移入显示左右切换按钮
weixin_44541162的博客
01-17 3145
如何实现轮播CSS伪类鼠标移入显示左右切换按钮 （作者：杨先金，撰写时间：2019年1月16日） 要实现这一效果，首先要分析清楚你要让鼠标移动到哪一个元素上触发伪类事件，这里是要让鼠标移入到container这个元素上显示左右切换按钮的这样一个效果，那么清晰的思路有了，你才能找到下手的切入点，才能更好地进行下一步操作。 图1 其次，为了实现显示效果，一开始就要将class=“prve”以及cl...
图片左右滚动（可自动，有左右按钮）
热门推荐
朱羽佳
07-25 1万+
图片左右滚动（可自动，有左右按钮） html代码如下： 图片滚动 *{margin:0;padding:0;} ul{list-style:none;} img{border:0;} .scroll{width:358px;height:63px;} .scroll_left{width:23px;height:63px;background:url(images
vue + js实现点击箭头实现左右切换
lianxin19900610的博客
08-09 9133
 &lt;div class="pubuItemsBox"&gt;         &lt;!-- 修改部分5.23晚 --&gt;         &lt;template v-for="(orderEvent, index) in orderEventList" &gt;           &lt;div :class="{'pubuItem':true, 'noMag':(index+1)...
css写向右的动画箭头
最新发布
09-05
CSS可以通过使用旋转和过渡动画来创建一个向右的动画箭头。 首先，我们需要创建一个箭头的HTML元素，可以使用`<div>`元素并为其添加一个唯一...当鼠标悬停在箭头上时，它将顺时针旋转180度，形成一个向左的动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值