大佬教程收集整理的这篇文章主要介绍了jquery – 使用缓动更改背景图像onclick,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
onclick部分是用Jquery实现的,但我正在努力解决缓动部分问题.
我在网上搜索过这个,但是每个解决方案都只在页面的一小部分使用div.
对我来说问题是我使用这些div作为一个整页,100%的宽度和高度,我有内容在div前面.
我想过使用精灵和背景位置的动画,但这没有帮助,因为我希望我的页面有响应,我有背景网址的百分比和精灵需要你声明固定的宽度(如果我错了,纠正我).
另外我必须在div后面添加另一个div,所以改变不透明度解决方案无能为力.我正在实施这样的网站:http://www.samsung.com/global/microsite/galaxynote3-gear/
HTML:
<div class="Page" id="feauture3"> <div id="feauture3_content"> <div id="feauture3_1"><strong>Menu1</strong></div> <div id="feauture3_2"><strong>Menu2</strong></div> <div id="feauture3_3"><strong>Menu3</strong></div> <div id="feauture3_4"><strong>Menu4</strong></div> </div> </div>
CSS:
#feauture3_1:hover { BACkground-color:#f2af95; @R_674_10930@or:pointer; } #feauture3_2:hover { BACkground-color:#f2af95; @R_674_10930@or:pointer; } #feauture3_3:hover { BACkground-color:#f2af95; @R_674_10930@or:pointer; } #feauture3_4:hover { BACkground-color:#f2af95; @R_674_10930@or:pointer; } #feauture3 { position: fixed; height: 100%; width: 100%; BACkground: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat; left:0; BACkground-size: cover; BACkground-color:#e18764; color:red; }
jQuery的:
jQuery(document).ready(function($){ $("#feauture3_1").click(function(){ $("#feauture3").css('BACkground-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")'); }); $("#feauture3_2").click(function(){ $("#feauture3").css('BACkground-image','url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")') }); $("#feauture3_3").click(function(){ $("#feauture3").css('BACkground-image','url("http://b296d35169b22ec514a7-3f0e5c3ce41f2ca4459ddb89d451f8d9.r21.cf2.rackcdn.com/wp-content/uploads/2012/11/Kawasaki-Z1-by-Ac-Sanctuary-.jpg")') }); $("#feauture3_4").click(function(){ $("#feauture3").css('BACkground-image','url("http://4.bp.blogspot.com/-ar4zyO_Ws4M/UekF8jk7nRI/AAAAAAAA1q4/ugQZlRGTLkk/s1600/Kawasaki-Z-1000-.jpg")') }); });
小提琴:
谢谢你的时间.
编辑:我最后使用了一个简单的$(“#feauture3”).css(‘BACkground-image’,’url(“image”)’)并将背景颜色设置为与图像匹配的整个div(真实项目)没有摩托车作为图像).这是完全可以接受的,我用这个解决方案.
#feauture3 { position: fixed; height: 100%; width: 100%; BACkground: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat; left:0; BACkground-size: cover; BACkground-color:#e18764; color:red; -webkit-transition:all 1.4s ease-in-out; -o-transition:all 1.4s ease-in-out; -moz-transition:all 1.4s ease-in-out; }
试试这个fiddle
以上是大佬教程为你收集整理的jquery – 使用缓动更改背景图像onclick全部内容,希望文章能够帮你解决jquery – 使用缓动更改背景图像onclick所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。