急求html代码,当鼠标移动到图片,图片停此滚动? HTML代码 实现图片滚动,鼠标放上去停止并且图片放大

\u6709\u5173\u7f51\u9875\u5236\u4f5c\uff1a\u5f53\u9f20\u6807\u79fb\u52a8\u5230\u6eda\u52a8\u7684\u56fe\u7247\u65f6,\u60f3\u8981\u8ba9\u5b83\u505c\u4e0b\u6765\u7684\uff0c\u5f53\u9f20\u6807\u79fb\u5f00\u65f6\uff0c\u7ee7\u7eed\u6eda\u52a8\u7684\u4ee3\u7801\u5982\u4f55\u5199\uff1f

\u56fe\u7247\u6eda\u52a8 var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-demo.scrollTop \u8fd9\u4e2a\u4f60\u53ea\u8981\u628a\u4f60\u9700\u8981\u7684\u56fe\u7247\u66ff\u6362\u4e0b\u5c31OK\u4e86,\u5982\u679c\u89c9\u5f97\u592a\u5c0f\u7684\u8bdd,\u6539\u4e0bwidth\u8ddfheight\u5c31\u597d\u4e86..

\u6ca1\u4ed4\u7ec6\u770b\u4f60\u4ee3\u7801\uff0c\u5148\u8bf4\u4e86\u5728\u770b\u4e0b\u3002
\u8981\u9f20\u6807\u60ac\u6d6e\u6548\u679c\u5e72\u5417\u4e0d\u7528onmousemove\u548conmouseout\u7ed3\u5408\u4f7f\u7528\uff1f

下面的图片滚动代码仅用于html网页中,分别可以向上向下向左向右的滚动!把下面此代码插入html网页的<body>< /body>中就可以了!

<!--下面是向上滚动代码-->

<div id=butong_net_top style=overflow:hidden;height:100;width:90;>
<div id=butong_net_top1>
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
</div>
<div id=butong_net_top2></div>
</div>
<script>
var speed=30 //这个是速度值越大速度越慢
butong_net_top2.innerHTML=butong_net_top1.innerHTML //克隆butong_net_top1为butong_net_top2
function Marquee1(){
//当滚动至butong_net_top1与butong_net_top2交界时
if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=0)
butong_net_top.scrollTop-=butong_net_top1.offsetHeight //butong_net_top跳到最顶端
else{
butong_net_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
butong_net_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
butong_net_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>

<!--向上滚动代码结束-->

<br>

<!--下面是向下滚动代码-->

<div id=butong_net_bottom style=overflow:hidden;height:100;width:90;>
<div id=butong_net_bottom1>
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
</div>
<div id=butong_net_bottom2></div>
</div>
<script>
var speed=30
butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML
butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight
function Marquee2(){
if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)
butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight
else{
butong_net_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
butong_net_bottom.onmouseover=function() {clearInterval(MyMar2)}
butong_net_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>

<!--向下滚动代码结束-->

<br>

<!--下面是向左滚动代码-->

<div id="butong_net_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="<img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
</tr>
</table>
</td>
<td id="butong_net_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function() {clearInterval(MyMar3)}
butong_net_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>

<!--向左滚动代码结束-->

<br>

<!--下面是向右滚动代码-->

<div id="butong_net_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
</tr>
</table>
</td>
<td id="butong_net_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function() {clearInterval(MyMar4)}
butong_net_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>

<!--向右滚动代码结束-->

如果你只需要移上去停止,移走就动的话就用这句
<marquee onmouseover="this.stop();" onMouseOut="this.start();" scrollamount="1" scrolldelay="85" direction="up" behavior="scroll" height="40" width="400">
要滚动的图片
</marquee>

图片上加链接和你给文字加链接是一样的

在你滚动的图片前面加一个<a></a>标签
<a href="这里面放要连接的网站"><img src="插入需要滚动的图片"></a>

实例 以下数据为假数据,请你更改你自己的真实数据
<a href="hao.html"><img src="img/hao.jpg"></a>

  • 甯垜涓嬩竴涓HTML浠g爜-榧犳爣绉诲姩鍒杩炴帴涓婂彉棰滆壊鐨勪唬鐮?
    绛旓細瑕佸畬鎴愭鏁堟灉鎶婂涓浠g爜鍔犲叆鍒<body>鍖哄煙涓 <ahref="link.htm"onMouseOver="document.bgColor='cc3366'"><fontcolor="33FF33">閾炬帴涓</font></a> <ahref="link.htm"onMouseOver="document.bgColor='ffff99'">閾炬帴浜</a> <ahref="link.htm"onMouseOver="document.bgColor='66cc66'">閾炬帴涓<...
  • 鍦html浠g爜涓,褰撻紶鏍囩Щ鍔ㄥ埌鎸夐挳涓婃椂,鎸夐挳杈规闂儊;榧犳爣绂诲紑鎸夐挳鏄,鎸 ...
    绛旓細1銆慶ss鏂瑰紡 .btn:hover{ /*璋冪敤css3鍔ㄧ敾鎴栬呭彲浠ラ棯鐑佺殑gif*/ } 2銆慾s鏂瑰紡 ().hover(function(){ //榧犳爣杩涘叆浜嬩欢 },function(){ //榧犳爣绉诲嚭浜嬩欢 })
  • html閲屾庝箞瀹炵幇榧犳爣鏀惧埌div涓婂悗,鏁翠釜div鍚戜笂鍔ㄤ竴鐐
    绛旓細濡備笅绀轰緥锛宱nmousemove灏辨槸榧犳爣鎮诞div鐨勬椂鍊欓噰鐢╠1鏍峰紡锛屽綋榧犳爣绂诲紑灏变娇鐢╠2鏍峰紡锛宮argin-top灏辨槸涓庝笂闈㈢殑璺濈锛屾帶鍒惰繖涓窛绂诲氨鑳藉疄鐜癲iv鍚戜笂绉诲姩鐨勬晥鏋溿傜ず渚嬶細<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绀轰緥</title><style type="text/css">....
  • 濡備綍鐢html浣褰撻紶鏍囩Щ鍒鏌愭柇瀛椾笂鏃舵敼鍙樺瓧鐨勫ぇ灏忓拰棰滆壊
    绛旓細棣栧厛闇瑕佹壘鍒拌繖娈靛瓧鎵鍦ㄧ殑鏍囩锛(濡<p>鏍囩)涔嬪悗璁剧疆褰撻紶鏍鎮诞鍦ㄨ鏍囩涓婃椂鐨勬牱寮,鍦╟ss鏍峰紡琛ㄤ腑澹版槑閫夋嫨鍣 鏍囩:hover(濡俻:hover)x:hover涓轰吉绫绘牱寮忥紝hover琛ㄧず榧犳爣鎮诞鍦ㄨ繖涓鏍囩涓婃椂 鏈鍚庡湪{}涓坊鍔犺缃瓧浣撳ぇ灏忋侀鑹茬殑浠g爜(濡 color:red;)--- 绀轰緥锛<style type="text/css"> p{ /*鍘熸湰...
  • 鍦html涓鎬庢牱瀹炵幇褰撻紶鏍囨斁鍒submit鎸夐挳涓婃椂浣块紶鏍囧彉涓哄崟鍑绘枃瀛楅摼鎺ユ椂鐨...
    绛旓細鍦html鏂囦欢涓坊鍔犱竴涓簨浠讹紝灏辨槸褰撻紶鏍婊戝姩鍒皊ubmit鎸夐挳涓婃椂锛岃缃紶鏍囨牱寮忓嵆鍙紝鍏蜂綋渚嬪瓙濡備笅锛<html><body><p>璇锋妸榧犳爣绉诲姩鍒鍗曡瘝涓婏紝鍙互鐪嬪埌榧犳爣鎸囬拡鍙戠敓鍙樺寲锛</p><span style="cursor:auto">Default</span><br /><span style="cursor:pointer"> Pointer</span><br /> <!--杩欎釜灏辨槸浣...
  • 榧犳爣绉诲姩涓婂幓浣垮瓧浣撳彉鑹,杩浠g爜鎬庝箞鍐
    绛旓細榧犳爣婊戣繃瀛椾綋鍙樿壊鏄竴绉嶅父瑙佺殑鏁堟灉锛屽埗浣滈紶鏍囨粦杩囧瓧浣撳彉鑹诧紝鍙互閫氳繃css鎻愪緵浜嗛紶鏍囨粦杩噃over閫夋嫨鍣ㄥ鏍峰紡杩涜淇敼銆傛搷浣滄楠ゅ涓嬶細1銆侀鍏堟墦寮html寮鍙戝伐鍏凤紝鍒涘缓涓涓猦tml鏂囦欢銆2銆佸湪html椤甸潰鎵惧埌<body>鏍囩锛屽湪<body>鏍囩閲岄潰杈撳叆鍐呭锛岀劧鍚庣敤<a>鏍囩鎶婂唴瀹硅鐩栥3銆佷慨鏀<a>鏍囩鐨勫唴瀹硅缃鑹蹭负钃濊壊銆4銆...
  • html鎬庝箞瀹炵幇榧犳爣鏀惧湪鏂囧瓧涓婃樉绀烘枃瀛(闄勫甫浠g爜)?
    绛旓細瀹炵幇榧犳爣鎮仠鏄剧ず鏂囧瓧锛宧tml涓浣跨敤title灞炴у氨鍙疄鐜版樉绀烘枃瀛楃殑鏁堟灉锛岃繖涓睘鎬ц繕鏄瘮杈冨疄鐢ㄧ殑锛屼綘鍙互鍙傝冧笅 <a href="#" title="杩欓噷鏄樉绀虹殑鏂囧瓧">hello</a> 褰撻紶鏍鎮仠鍦 hello涓婁竴浼氬氨浼氭湁鏂囧瓧 "杩欓噷鏄樉绀虹殑鏂囧瓧" 鏄剧ず銆
  • 甯垜涓嬩竴涓HTML浠g爜-榧犳爣绉诲姩鍒杩炴帴涓婂彉棰滆壊鐨勪唬鐮?
    绛旓細<html> <head> <style> a:link{COLOR:000000;TEXT-DECORATION:none;font-weight:bold;font-size:18px} a:visited{COLOR:000000;TEXT-DECORATION:none;font-weight:bold;font-size:18px} a:active{COLOR:red;TEXT-DECORATION:underline;font-weight:bold;font-size:18px} a:hover{COLOR:red;TEXT-...
  • 姹榧犳爣绉诲埌鏂囧瓧鍚庢湁鎻愮ず淇℃伅鐨HTML浠g爜
    绛旓細<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"<HTML> <HEAD> <TITLE>缃戦〉鍗虫椂鎻愮ず婕旂ず </TITLE> <!STYLE鍏冪礌瀹氫箟椤剁骇鍏冪礌BODY涓庤鍐呭厓绱燬PAN鐨勬牱寮> <STYLE> BODY {cursor:default} SPAN {background-color:yellow} </STYLE> </HEAD> <BODY> <H3>Unit 14 Lesson 54</H3> <P> ...
  • HTML,褰鎴榧犳爣绉诲姩鍒灏忓浘鐗囦笂闈㈢殑鏃跺,榧犳爣鍚庨潰灏辨樉绀哄ぇ鍥剧墖?_鐧惧害...
    绛旓細涓嬭浇涓涓媕query鎻掍欢锛岀劧鍚庢柊寤轰竴涓猅oolTip.js鏂囦欢锛屽湪璇ユ枃浠朵笅鍐欏叆浠ヤ笅浠g爜锛(function() { var x = 10;var y = 10;("a.tooltip").mouseover(function(e) { this.myTitle = this.title;this.title = "";var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='...
  • 扩展阅读:js hover 触发事件 ... html鼠标经过效果代码 ... vue鼠标hover事件 ... 100种颜色代码大全 ... 黄色代码复制粘贴 ... html图片左右移动代码 ... html鼠标悬停事件hover ... html鼠标悬停变色代码 ... 鼠标点击事件html代码 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网