这里介绍两种方式：
一：通过css样式中的 ":hover"实现，代码如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red
width:200px
height:200px
}
div:hover{
background:red
width:500px
height:500px
}
</style>
</head>
<body>
<div>变大</div>
</body>
</html>
二：通过javascript方式实现，代码如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red
width:200px
height:200px
}
.divs{
background:red
width:500px
height:500px
}
</style>
</head>
<body>
<div>变大</div>
<script>
// 首先获取div元素
var divs = document.getElementsByTagName('div')[0]
//鼠标移入，将divs的className样式赋给该标签
divs.onmouseover = function () {
this.className = "divs"
}
//鼠标移出，将空的className样式赋给该标签
divs.onmouseout = function () {
this.className = ""
}
</script>
</body>
</html>
图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 <宽度 <= 768，加载120px的图片， 宽度>768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。
WPF用RenderTransform实现，随便做了个，代码如下。
XAML
<Window x:Class="WpfApplication3.MainWindow"xmlns="
xmlns:x="
title="MainWindow"
Height="350"
Width="525">
<Grid>
<Image Name="image" Source="/WpfApplication3component/Images/Hydrangeas.jpg">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rt"/>
<ScaleTransform x:Name="st"/>
<TranslateTransform x:Name="tt"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<StackPanel Orientation="Horizontal"
Height="20">
<Button Name="btnScale1"
Content="缩小"
Click="btnScale1_Click" />
<Button Name="btnScale2"
Content="放大"
Click="btnScale2_Click" />
<Button Name="btnRotation1"
Content="左转"
Click="btnRotation1_Click" />
<Button Name="btnRotation2"
Content="右转"
Click="btnRotation2_Click" />
<Button Name="btnMove1"
Content="左移"
Click="btnMove1_Click" />
<Button Name="btnMove2"
Content="右移"
Click="btnMove2_Click" />
<Button Name="btnMove3"
Content="上移"
Click="btnMove3_Click"/>
<Button Name="btnMove4"
Content="下移"
Click="btnMove4_Click" />
</StackPanel>
</Grid>
</Window>
CS如下
namespace WpfApplication3{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent()
DataContext = this
}
private bool _ischecked = false
public bool IsChecked
{
get
{
return _ischecked
}
}
private void btnScale1_Click(object sender, RoutedEventArgs e)
{
st.CenterX = image.ActualWidth / 2
st.CenterY = image.ActualHeight / 2
st.ScaleX -= 0.1
st.ScaleY -= 0.1
}
private void btnScale2_Click(object sender, RoutedEventArgs e)
{
st.CenterX = image.ActualWidth / 2
st.CenterY = image.ActualHeight / 2
st.ScaleX += 0.1
st.ScaleY += 0.1
}
private void btnRotation1_Click(object sender, RoutedEventArgs e)
{
rt.CenterX = image.ActualWidth / 2
rt.CenterY = image.ActualHeight / 2
rt.Angle -= 10
}
private void btnRotation2_Click(object sender, RoutedEventArgs e)
{
rt.CenterX = image.ActualWidth / 2
rt.CenterY = image.ActualHeight / 2
rt.Angle += 10
}
private void btnMove1_Click(object sender, RoutedEventArgs e)
{
tt.X -= 10
}
private void btnMove2_Click(object sender, RoutedEventArgs e)
{
tt.X += 10
}
private void btnMove3_Click(object sender, RoutedEventArgs e)
{
tt.Y -= 10
}
private void btnMove4_Click(object sender, RoutedEventArgs e)
{
tt.Y += 10
}
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）