html5怎样设置一个背景图片随着滚轮变动

Posted 2023-05-02

这个网页的效果是什么？怎么做出来呢？http://www.10086.cn/cmccclient/

我大概理解到了你的意思，是想实现背景的视觉差效果吧。如果是这个的话两种方法，
一种是设置background-attachment:fixed;背景固定了
另外一种就是利用 animate css3的属性，想兼容更多的浏览器建议用jquery控制。感觉应该是你想要的效果了。

你说的这个是单页面效果。我给你个网址上面有好多这样的 www.jq22.com 参考技术A 你我都知道在html5网页中添加鼠标滚轮事件能够更好的让用户与网页进行交互操作。而在HTML5中，鼠标滚轮并不仅仅就只能上下滑动网页，实际上你还可以依靠这个完成更多的功能，比如视野平面的放大与缩小。
看看实际演示效果
大部分浏览器都是支持鼠标滚轮事件的，所以你可以先订阅鼠标滚轮事件的方法，每当事件被触发时，你能获取一个名为 wheelDelta 的属性，它代表刚才鼠标滚轮改变的大小，其中正值表示滚轮往下滑动，负值表示滚轮往上滑动。数值的绝对值越大，滑动范围越大。
但不幸的是依然有一款浏览器是不支持鼠标滚轮事件的。那就是FireFox。Mozilla 已经实现了一个名为"DOMMouseScroll"的事件的处理，它会传递一个名为 event 且附带了名为 detail 属性的事件参数过来，然而，这个 detail 属性不同于 wheelDelta，它只能返回正值，即只能坚持鼠标滚轮向下滚动的值。
你应该特别注意一下，Apple公司在Safari浏览器中也禁用了鼠标滚动控制页面上下滑动，但是此功能依然在webkit引擎中正常使用的，所以你写的代码是不会触发什么问题的。
添加鼠标滚轮事件处理方法
首先我们在网页中添加一个图片，待会就能用鼠标滚轮控制此图片的缩放
XML/HTML Code
<img id="myimage" src="myimage.jpg" alt="my image" />
现在来添加鼠标滚轮事件处理代码
XML/HTML Code
var myimage = document.getElementById("myimage");
if (myimage.addEventListener)
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);
为了让不同浏览器都能支持的处理做法
在下面这个案例中，我们将对Firefox的detail值取反然后返回1或者-1的其中一个
XML/HTML Code
function MouseWheelHandler(e)
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
现在我们直接决定图片的大小范围。以下代码将图片的宽度范围设置在50-800个像素之间
XML/HTML Code
myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";
return false;

最后一点，我们在方法中返回false是为了终止标准的鼠标滚轮事件处理，以防它上下滑动网页。 参考技术B 插入 <marquee behavior="scroll"> </marquee>,望采纳

C# winform 中的picturebox 中装载的图片怎样随滚轮放大缩小，图框大小不变

可以分成两个问题

C#如何缩放图片（与界面没关系）

Winform如何响应滚轮事件

追问

对，怎么做？

追答

你分开提问。

追问

你就告诉我怎么缩放

追答

假定图片的原尺寸与图片框一样

缩：你希望怎么缩，是不是边上留出空白？

放：显示放大后的哪 部分？全部都放能装下吗？

参考技术A 有一个鼠标时间，可以实现追答

事件

参考技术B 不认识英文追问

GunDuZi,这个认识吗？

追答

我靠，小学毕业，真的不知道啊。