图片放大方法一：

<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;}；的更多相关文章

  1. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  2. 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  3. Android 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  4. 认识图片放大工具PhotoZoom的菜单栏

    使用PhotoZoom能够对数码图片无损放大,备受设计师和业内人员的青睐,它的出现时一场技术的革新,新颖的技术,简单的界面,优化的算法,使得它可以对图片进行放大而没有锯齿,不会失真.本文为您一起来认识 ...

  5. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  6. WPF图片放大后模糊的解决方法

    原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...

  7. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  8. jq随手写图片放大

    html: <img id="img1" src="<?php echo $info->business_licence_img; ?>" ...

  9. 【前端】特效-Javascript实现购物页面图片放大效果

    实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...

随机推荐

  1. 【xml 报错】xml编译错误

    ---恢复内容开始--- 有时候在xml文件中,特别是于Spring相关的配置文件中,会出现一些不影响程序正常运行的编译错误,如: Referenced file contains errors (h ...

  2. DEDECMS教程:上/下一篇文章标题长度的截取方法

    对dedecms了解的朋友们,想必对如何获取上一篇.下一篇文章的标签也是非常熟悉.dedecms获取上一篇.下一篇文章的标签分别为:{dede:prenext get='pre'/}.{dede:pr ...

  3. AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码

    AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码 添加Watch应用对象时新增内容介绍 Watch应用对象添加到创建的项目中后,会包含两个部分:Watch App 和 Wa ...

  4. Queuing

    Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission ...

  5. 模拟 POJ 2993 Emag eht htiw Em Pleh

    题目地址:http://poj.org/problem?id=2993 /* 题意:与POJ2996完全相反 模拟题 + 字符串处理:无算法,读入两行字符串找出相应点用used标记,输出时标记过的输出 ...

  6. 【c++】标准模板库STL入门简介与常见用法

    一.STL简介 1.什么是STL STL(Standard Template Library)标准模板库,主要由容器.迭代器.算法.函数对象.内存分配器和适配器六大部分组成.STL已是标准C++的一部 ...

  7. BZOJ1397 : Ural 1486 Equal squares

    二分答案mid,然后检验是否存在两个相同的mid*mid的正方形 检验方法: 首先对于每个位置,求出它开始长度为mid的横行的hash值 然后对于hash值再求一次竖列的hash值 将第二次求出的ha ...

  8. [Cocos2d-x For WP8]Particle粒子系统

    在游戏中,经常要实现一些真实的效果,这些效果(如,火焰,雪花等)都是由大量微粒组合而形成的.为了在游戏中实现这种效果,我们必须引进粒子系统,粒子系统中需要包括四个部分:粒子对象,运动规律,随机性,粒子 ...

  9. COJ 删除数字

    试题描述 输入正整数N和M,在N中删除掉M位,能留下的最大整数是多少? 输入 正整数N和M 输出 留下的最大整数 输入示例 233390323 5 输出示例 9323 其他说明 1<=N< ...

  10. 发现未知字段 state ，过滤条件 [["state","not in",["draft"]]] 有误 的处理

    通常该问题出现的原因在于对象定义的state字段在view中并没有出现,解决方案就是在view中添加该字段即可．