鼠标滑过切换另一张图片
/ , 2:53 AM / 关键词:
鼠标滑过时变换另一张图片，特别适合做一些T台展示，双面展示等等，要实现此功能那就必须要用到，其实，我之前写的“”已经把核心代码写出来了。
今晚我重新编写了一下，尺寸是950宽度展示3个宝贝，宝贝尺寸是300px*300px。
效果展示：
使用说明：
要想使用此JS特效代码，必须进行源代码修改，而不能使用可视化视图修改，前面第一张背景为正常显示的图片，后面第二张背景为鼠标滑过时切换的图片。
视频教程：
全部代码如下：
&div class="sub all_t1" style="width:300height:300border:1px dashed #background:url(/imgextra/i4//T23s6mXblaXXXXXXXX_!!.jpg_310x310.jpg);float:margin-right: 20px"&
&div data-widget-config="{'trigger':'.all_t1','align':{'node':'.all_t1','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"&
&div style="width:298height:298background:url(/imgextra/i3//T2bFTmXldaXXXXXXXX_!!.jpg_310x310.jpg)"&&/div&
&div class="sub all_t2" style="width:300height:300border:1px dashed #background:url(/imgextra/i4//T23s6mXblaXXXXXXXX_!!.jpg_310x310.jpg);float:margin-right: 20px"&
&div data-widget-config="{'trigger':'.all_t2','align':{'node':'.all_t2','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"&
&div style="width:298height:298background:url(/imgextra/i3//T2bFTmXldaXXXXXXXX_!!.jpg_310x310.jpg)"&&/div&
&div class="sub all_t3" style="width:300height:300border:1px dashed #background:url(/imgextra/i4//T23s6mXblaXXXXXXXX_!!.jpg_310x310.jpg);float:left"&
&div data-widget-config="{'trigger':'.all_t3','align':{'node':'.all_t3','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"&
&div style="width:298height:298background:url(/imgextra/i3//T2bFTmXldaXXXXXXXX_!!.jpg_310x310.jpg)"&&/div&
完整版源代码如下：（可以加链接的）
&div class="sub all_t12" style="width:300height:300border:1px dashed #background:url(/imgextra/i4//T23s6mXblaXXXXXXXX_!!.jpg_310x310.jpg);float:margin-right: 20px"&
&div data-widget-config="{'trigger':'.all_t12','align':{'node':'.all_t12','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"&
&div style="width:298height:298background:url(/imgextra/i3//T2bFTmXldaXXXXXXXX_!!.jpg_310x310.jpg)"&
&a href="#" style="display:width:298height:298" target="_blank"&&/a&&/div&
&div class="sub all_t13" style="width:300height:300border:1px dashed #background:url(/imgextra/i4//T23s6mXblaXXXXXXXX_!!.jpg_310x310.jpg);float:margin-right: 20px"&
&div data-widget-config="{'trigger':'.all_t13','align':{'node':'.all_t13','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"&
&div style="width:298height:298background:url(/imgextra/i3//T2bFTmXldaXXXXXXXX_!!.jpg_310x310.jpg)"&
&a href="#" style="display:width:298height:298" target="_blank"&&/a&&/div&
&div class="sub all_t14" style="width:300height:300border:1px dashed #background:url(/imgextra/i4//T23s6mXblaXXXXXXXX_!!.jpg_310x310.jpg);float:left"&
&div data-widget-config="{'trigger':'.all_t14','align':{'node':'.all_t14','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"&
&div style="width:298height:298background:url(/imgextra/i3//T2bFTmXldaXXXXXXXX_!!.jpg_310x310.jpg)"&
&a href="#" style="display:width:298height:298" target="_blank"&&/a&&/div&
(21 条评论)
(6 条评论)
(14 条评论)
(15 条评论)
(8 条评论)
(10 条评论)
(20 条评论)
(13 条评论)
(8 条评论)
(55 条评论)
代码是可用的，感谢。但为什么不能加链接呢？顺问一句，你是不是武汉的啊。
@raosheng: 可以加链接的，在鼠标滑过时显示的那张图片后面加个&a&标签即可。完整代码已经更新，感谢您的反馈！
我是广西人，现在武汉工作
楼主的客气，让我有点不好意思；是我应该说感谢。让我再次有真诚的感受。代码方面，我就是小北了。以后还望楼主能不吝赐教。先感谢了。
@raosheng: 只要我会的都会毫不保留，有大家的支持本站才能做得更好！
@GXzhou: 请问那个图片与图片之间的间距怎么调？
@GXzhou: 修改尺寸放上去后留出挺多空间的然后就自动换行了，应该怎么改，求指教
楼主你好，再来问一下，今天我将代码中图片改变了一下尺寸，为什么变换后的图片没有在原图片覆盖的地方出现；很奇怪的出现到了原图片的上部。还有加您旺旺，怎么没有回应啊。5555
问题已解决，谢谢，还是希望能有个有效的工具可以与您沟通。今天还发现一个问题，就是“鼠标滑过时左右切换宝贝”这个代码，在淘宝中，图片轮播时出现了，在边框外有显的情况，本来应该是点在9月21号上新，页面只显示21号内的设置产品，但28号的图片，会在边框外的地方显示，就是说，这16张图都可见。（注，是时有时无，不清楚是什么问题，想您可能会知道。）
@raosheng: 不好意思，今天我转上夜班了，白天休息，刚看到你的问题，我旺旺一直在线，没看到有人加。
第一个问题：如果你需要更改图片尺寸，那必须同时修改两处，即正常显示的图片和鼠标滑过时显示的图片。还有JS特效配置也必须要修改一下，'offset':[0,-300]，意思就是鼠标滑过时，图片显示的位置，0是左右，-300是上下，一般左右不用修改，把上下位置修改一下即可。比如你的图片高度是350px，那就修改成-350即可。
第二个问题：很简单，就是溢出了，你应该用的是IE内核浏览器，我用的Mac，谷歌和火狐下是没有这个问题的，为此我前几天专门测试了下，目前只发现IE下会溢出，很抱歉我没有及时更正此问题。
解决方法：在最外层的DIV加一个overflow:hidden隐藏溢出。
就第二个问题谈下，目前很多朋友都在寻找“全屏轮播”，运用此BUG即可实现全屏轮播，但遗憾的是，只有IE下才有全屏轮播的效果
@GXzhou: 最外层的div是在哪里？
哈哈 貌似发现了个好地方&&恩 学习了
楼主你好，有个问题想请教您，这个代码在同一个店铺只能自定义一次，二次使用的时候就没有效果了，要如何修改代码？
@xfeng139: 这个问题一直是我想说的，但因为一直没人反映，所以我也就一直没理他，还以为大家都明白了。
这个特效代码可以在店铺里使用N次，超过9999999.....次，只需要修改如下三处地方：
class=&sub all_t1&
data-widget-config=&{'trigger':'.all_t1','align':{'node':'.all_t1'&
把上面三处“all_t1”中的1修改为任意数字即可，注意：三处数字必须一致！
@GXzhou: 把上面三处“all_t1”中的1修改为任意数字即可，注意：三处数字必须一致！
这里的1 是表示一次吗？&& 改成999就是999次吗？&&有没有无限的次数？
哦的个神，解决我一个多年的难题。多谢。
哇哇，发现个好地方。网站虽然不大，但是很实用，很多别人不会分享的东西都有，
@753914: 本站现在用的只是一个博客系统，用户体验不是很好，以后会慢慢改进的，欢迎你常来本站
@GXzhou: 嗯嗯，会常来的&&，就是加载代码的时候会很慢
你好 ，请问 ，如果 我用photoshop切图得到的html文件，图像切割不是规则的，例如左边一半的位置一张大图，右边田字形状有四张图片。 那样的我要怎么改代码呢
@753914: 你好，如果只是切图的话，你可以用PS，但如果你同时要代码的话，那请使用FW，保存的时候选择HTML即可。
或者你也可以在图片在添加热点链接，这样就不用切图了，具体可以看这里：/archives/247/
谢谢站主的回答 ，不是这样的， 我会不规则的切图和加链接，我想要那种鼠标滑动过会显示另一张图片例如宝贝的背面之类的。
@753914: 那就有点麻烦了，建议你用做成GIF动画
@GXzhou: 额 这样啊 ，效果不是我想要的 ，请问有类似的html文件吗，如果方便的话，可以发给我研究一下吗 邮箱***@qq.com ，代码我会一点点，能读懂点
@753914: 核心代码就在文章中了，你会HTML的话可以自己编的
@GXzhou: 好 ，谢谢你，我去试试，html的话 其实也不懂，就是简单的换一下图片 或者改一下尺寸的就会一点，这个'offset':[0,-300] 如果是右边下方的图是改成怎样的呢，还有 photoshop报下来的html文件是table表格的&&我不会转换成div的
@753914: 亲，你的问题真不是一两句话能说清了，改天我有时间再重新编吧，现在忙
@GXzhou: 好 谢谢你的热心帮忙
你好，我想请问下您的旺旺或者QQ是多少呢？我有个问题，就是这个虚线框能去掉吗？
@lxiaosky: 删除 border:1px dashed #
@GXzhou: 请问可不可以在图片下面加字呢？我想在宝贝图片下面可以直接打字和价格，按照现在的代码，只能把字加到图片里面去
@lxiaosky: 暂时没有这个打算
GXzhou,这个教学视频花掉了，看不了。能给个有效的视频吗？我对这个技巧非常感兴趣，很想看看视频教程。谢谢。
@joyasme: 亲，视频是可以正常观看的，而且这就是个视频演示，并不是什么开发教程
为什么我将代码改成475*400像素的图像，却无法将楼主的三个图片改成两张图片格式
请问，在鼠标滑过时显示的那张图片后面加个&a&标签后，链接地址应该加在哪里。小白纠结很久，希望得到答案，3Q为瑞玛曲！
@虚心请教: href=&#& 把#修改为链接地址
你好，我想问一下，我想在一行显示4个图。我直接在后面加一份图的代码&&但是显示出来的换行了。我要在那里修改一下？
#16号问题解决了。。。
还有一个问题是&&如果图片小于300x300&&图片就是平铺满整个300X300的框框内，能不能居中只显示一个图片？？
这个网站很牛逼，希望站长的排名越来越好。
我只能说博主碉堡了。。。。。我就用这个代码，两天就开店了
请问大家为什么这段代码我就用不了呢，替换相关图片地址后，网站前台什么显示都没有，再点击后台编辑代码，里面的代码都变了。
名字 (必填,如果已是注册用户请先登陆)
邮箱 (必填,不会被公开,只有站长才能看到)
网站（可填可不填，如填请加http://）
验证码 (必填)jQuery实现鼠标滑过Div层背景变颜色的方法
来源：易贤网&& 阅读：1410 次&&日期：
温馨提示：易贤网小编为您整理了“jQuery实现鼠标滑过Div层背景变颜色的方法”,方便广大网友查阅！
这篇文章主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法。分享给大家供大家参考。具体实现方法如下：代码如下:&html&&head&&title&jQuery实现感应鼠标经过Div层变换图层背景颜色)&/title&&style type="text/css"&.divbox{ height:300width:200background:#border:solid 1px #float:margin-right:10}.divOver{background:#eff8border:solid 1px #d2dce3;} #zztj{color:#}#zztj a,#zztj a:link,#zztj a:visited,#zztj a:active {color:#}#zztj a:hover {color:#}&/style&&script src="/images/jquery.js"&&/script&&script language="javascript"&$(function(){//当鼠标滑入时将div的class换成divOver$('.divbox').hover(function(){$(this).addClass('divOver'); },function(){//鼠标离开时移除divOver样式$(this).removeClass('divOver'); });});&/script&&/head&&body&&div id="menu"&&div class="divbox"&区块A&/div&&div class="divbox"&区块B&/div&&div class="divbox"&区块C&/div&&/div&&br&提示：如果不显示预览效果，请&font color=red&刷新一下本页面&/font&，因调用了远程的jquery插件，需要加载完成才能运行。&/body&&/html&希望本文所述对大家的jQuery程序设计有所帮助。
更多信息请查看
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址：
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读 & & &
&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款