图片放大方法、、菜单栏的位置随滚轮移动固定方法、、<a></a>去外层虚线方法：a:focus { outline:none; -moz-outline:none;}；
图片放大方法一：
<style type="text/css">
.xt{ width:230px; height:230px;}
.tp{ width:230px; height:230px; overflow:hidden;}
.tp img{transition:all 1s ease-out 0s; margin-left:0px; margin-top:0px; perspective-origin:bottom;}
</style>
<body>
<div class="tp">
<img class="xt" onmouseover="Bian(this)" onmouseout="Hui(this)" src="c320_20160923147459793296513.jpg"/>
</div>
</body>
<script type="text/javascript">
function Bian(a)
{
a.style.marginTop = "-10px";
a.style.marginLeft = "-10px";
a.style.height=" 260px";
a.style.width= "260px";
}
function Hui(a)
{
a.style.height=" 230px";
a.style.width= "230px";
a.style.marginTop = "0px";
a.style.marginLeft = "0px";
}
</script>
图片放大方法二：（只调整鼠标样式实现图片放大）
<style type="text/css">
*{ margin:0px auto; padding:0px; font-size:15px; font-family:微软雅黑;}
#a{ width:300px; height:300px; margin-top:150px; overflow:hidden;}
.b{width:300px; height:300px; cursor:pointer; margin-top:0px; margin-left:0px; }
.b:hover{ width:350px; height:350px; margin-top:-25px; margin-left:-25px; transition: all 1s ease-in-out 0s; }
</style>
</head>
<body>
<div id="a">
<img class="b" src="a6.png" />
</div>
</body>
菜单栏的位置随滚轮移动固定方法：
<style type="text/css">
.t{ width:990px; height:80px; background-color:#F00; font-size:23px;}
</style>
<body>
<div style="width:100%; height:80px; background-color:#000; position:fixed;"></div>
<div style="width:200px; height:300px; background-color:#00F;"></div>
<div class="t"></div>
<div style="width:800px; height:1000px; background-color:#09F;"></div>
</body>
<script type="text/javascript">
$(document).ready(function(e)
{
var off=$(".t").offset(); //当前DIV离浏览器边框四边的距离
var of=off.top-160; //DIV离顶部的距离-本身DIV高度加顶部DIV高度的总高；（160PX视个人制作的DIV离上边框的距离而定）
$(window).scroll(function()
{
var scr=$(window).scrollTop(); //获取滚动条Y轴距离
if(scr>of)
{
$(".t").css("position","fixed");
$(".t").css("top","80px"); //根据需要调整
$(".t").css("background-color","#906"); //根据需要调整
$(".t").css("left","275px"); //根据需要调整
$(".t").css("width","800px"); //根据需要调整
$(".t").css("height","60px"); //根据需要调整
}
if(scr<of)
{
$(".t").css("position","absolute");
$(".t").css("top","230px"); //根据需要调整
$(".t").css("background-color","#F00"); //根据需要调整
$(".t").css("left","180px"); //根据需要调整
$(".t").css("width","990px"); //根据需要调整
$(".t").css("height","80px"); //根据需要调整
}
})
});
图片放大方法、、菜单栏的位置随滚轮移动固定方法、、<a></a>去外层虚线方法：a:focus { outline:none; -moz-outline:none;}；的更多相关文章
- JavaScript 实现用户点击图片放大
JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...
- 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
- Android 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
- 认识图片放大工具PhotoZoom的菜单栏
使用PhotoZoom能够对数码图片无损放大,备受设计师和业内人员的青睐,它的出现时一场技术的革新,新颖的技术,简单的界面,优化的算法,使得它可以对图片进行放大而没有锯齿,不会失真.本文为您一起来认识 ...
- 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用
今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...
- WPF图片放大后模糊的解决方法
原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...
- 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
- jq随手写图片放大
html: <img id="img1" src="<?php echo $info->business_licence_img; ?>" ...
- 【前端】特效-Javascript实现购物页面图片放大效果
实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...
随机推荐
- 用indexOf判断设备
通过userAgent去判断,先判断是否为移动端,可以判断是iOS终端和Android终端,也可以具体到应用进行判断微信,微博,qq访问. <!DOCTYPE html> <html ...
- 模拟 POJ 2996 Help Me with the Game
题目地址:http://poj.org/problem?id=2996 /* 题意:给出白方和黑方的棋子和对应的坐标,输出该副棋盘的样子 模拟题 + 结构体排序:无算法,switch区分读入的字符,按 ...
- HDU3987 Harry Potter and the Forbidden Forest（边数最少的最小割）
方法1:两遍最大流.一遍最大流后,把满流边容量+1,非满流边改为INF:再求最小割即为答案. 我大概想了下证明:能构成最小割的边在第一次跑最大流时都满流,然后按那样改变边容量再求一次最小割,就相当于再 ...
- UVa11324 The Largest Clique（强连通分量+缩点+记忆化搜索）
题目给一张有向图G,要在其传递闭包T(G)上删除若干点,使得留下来的所有点具有单连通性,问最多能留下几个点. 其实这道题在T(G)上的连通性等同于在G上的连通性,所以考虑G就行了. 那么问题就简单了, ...
- reqSUB错误
---- ERROR ---- Error in dispatcher subroutine reqSUB: Invalid PAR(1): 0502 上面是用adams/ca加载一个汽车模型时 ...
- BZOJ2757 : [SCOI2012]Blinker的仰慕者
BZOJ AC900题纪念~~ 若K>0,则 设f[i][j]表示i位数字,积为j的数字的个数 g[i][j]表示i位数字,积为j的数字的和 DP+Hash预处理 查询时枚举LCP然后统计贡献 ...
- objective-c 条件运算符
条件运算符 val1!=0 ? val1:val2 等价于 val1?val2
- 【BZOJ】1051: [HAOI2006]受欢迎的牛（tarjan）
http://www.lydsy.com/JudgeOnline/problem.php?id=1051 这题还好-1A了..但是前提还是看了题解的 囧.....一开始认为是并查集,oh,不行,,无法 ...
- c#中的partial关键字(转)
c#中的partial关键字 Partial: 这是C#2.0的新特性 Partial关键字起到把一个class分段组合作用,能用于多个接口或一个继承 代码片断: namespace Com ...
- Shell 操作练习
#! /bin/sh ############################### # -- # # author jackluo # # net.webjoy@gmail.com # ###### ...